vue路由

1，什么是vue路由？

Vue路由是指根据url分配到对应的处理程序；作用就是解析URL，调用对应的控制器（的方法，并传递参数）。Vue路由有助于在浏览器的URL或历史记录与Vue组件之间建立链接，从而允许某些路径渲染与之关联的任何一个视图。

2，原生js实现vue路由

a标签中加入#/路径，配合window.onhashchange事件。哈希值访问时，会把hash值拼接到url路径后，并触发hashchange事件。

3，vue 路由实现的步骤：

（1），在引入vue之后引入vue路由插件

（2），在根组件模板中写入导航条，使用router-link标签（固定路由）

（3），创建全局组件，有多少路由创建多少组件。

（4），创建vuerouter对象，里面有routes字段是个数组，里面有对象，对象中包含path，component字段值是全局组件的返回值，ye可以有name字段。

（5），在跟组件中 写入router字段，它的值是vuerouter对象的返回值

（6），在跟组件模板中添加router-view字段，路由出口。

4，vue路由跳转的两种方式

（1），使用标签router-link 标签跳转。

（2），使用编程式导航跳转，原理是 点击button按钮，触发函数，执行router.push('/path')   参数可以是路径 也可以是传递的参数.

5，路由的重定向

在默认直接打开的情况下，hash值默认指向/，如果想让它打开时，默认指向某个路径，可以用重定向  在routes中添加一个对象

{path：‘/’，redirect=‘/main’}

6，路由监听

在根组件中可以对路由进行监听，使用 watch属性  监听$route 字段（这是路由的配置信息，自动生成的），参数有两个值newvalue，oldvalue，分别是跳转后的路由对象和跳转前的路由对象，对象中有path，代表路径，可以判断从哪一个路由到哪一个路由。

注意  $route ，router区别：

router是我们自己写的路由对象，里面包括path和component字段。 等同于this.$router 

$route是自动生成的，里面是每一个路由对象的具体信息。

7，  keep-alive  在路由跳转时，组件会创建销毁，如果不想组件创建和销毁，可以用keep-alive保留状态，组件中的数据会保留，做法是在router-view外写keep-alive标签。

　　transition是动画效果，有出场和入场动画，可以通过name属性来达到控制页面切换之间的动画。

8，vue路由传值

方式一：url拼接传值，

步骤：（1）在组件的data对象中添加 msg字段

（2）在动态路由的router-link标签的:to属性上拼接  ：to=" ‘/main?name=’+msg ”

（3）在需要的模板标签中使用 $route.query.name 接收。

方式二：友好url传值

步骤：（1）在路由配置对象中添加动态路由配置。{path:'/main/:name',component:Maincom}  动态路径

（2）在动态路由的router-link标签的:to属性上拼接  ：to=" ‘/main/‘+msg”

（3）在路由跳转后的组件模板上接受使用 $route.params.name

方式三：query对象传值

步骤：（1）动态路由to属性绑定一个obj对象，

（2）在data中定义一个obj对象包括obj:{path:'/main',query:{ name：’lisi‘ }}

  (3)   在路由跳转后的组件模板内，使用$route.query.name 接收

方式四：命名路由（params对象）传值

步骤：（1）在需要向外传递的路由配置对象中加入name字段 name='guoge'

  (2)   动态路由to属性绑定一个obj对象 data中定义的对象中有name字段和params字段对象，对象中是传递的信息。

传递动态值

computed: {
                obj() {
                    return {
                        path: "/main",
                        query: { name: this.msg }
                    }
                }
            }

（3）在路由跳转后的组件模板中使用$route.params.name 接收 如果在组件中使用 可以用 this.$route.params.name。

 四种路由传值方式的主要区别:
        前三种(url拼接,动态url,query对象)传值方式都会把数据拼接到url路径上, 刷新页面数据不会丢失, 但由于url长度有限制, 数据量不能太大
        第四种(命名路由传值)传值方式不会把数据拼接到url路径上, 刷新页面数据会丢失, 但传递的数据量大小无限制

9，编程式跳转传值

一般式button按钮 触发函数，函数中写入 router.push( '跳转的路径？name='+zhangsan)   url 传值

router.push( '跳转的路径/'+this.msg)     动态url 传值

router.push({path:'/main',query:{name:'zhangsan'}})   query对象传值

router.push({name:'/main',params:{name:'zhangsan'}})   params对象传值

router.back()  返回上一个路由

router.go(1) 去下一个路由