Vue路由总结

官网:https://router.vuejs.org/zh/

一、vue-router的理解
首先，需要理解一下vue-router：
vue-router是vue的一个插件，专门用来实现SPA应用。SPA也就是单页Web应用，特点是：整个应
用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要
通过ajax请求获取。
二、路由的理解
什么是路由：
1、一个路由就是一组映射关系（key-value）
2、key为路径，value可能是function或component
路由的分类：
1、后端路由
（1）理解：value是function，用于处理客户端提交的请求。
（2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。
2、前端路由
（1）理解：value是component，用于展示页面内容。
（2）工作过程：当浏览器的路径改变时，对应的组件就会显示。

三、路由（vue-router）的基本作用:
将每个路径映射到对应的组件，通过修改路由进行组件之间的转换

四、路由实现步骤
第一步:在vue之后导入vue-router插件 
第二步:在根组件模板中,添加路由跳转标签
第三步:在全局作用域,创建路由跳转页面对应的组件
第四步:创建路由对象,配置路由信息
第五步:把路由信息对象加入vue根组件对象中
第六步:在根组件模板合适的位置,添加路由出口(组件渲染的位置)

五、路由跳转的两种方式

1.声明式导航跳转(标签跳转) 在根组件模板中,使用router-link组件标签实现路由跳转-
2.编程式导航跳转,在js中使用router调用push函数实现路由跳转

六、路由传值

1.url拼接传值
            // 1.在路由跳转前的组件内,给路由路径后添加?键值对拼接数据传值
            // <router-link :to="'/main?name='+msg">主页</router-link>
            // 2.在路由跳转后的组件内,使用$route对象调用query字段接收数据
            // $route.query.name  this.$route.query.name
2.友好url(动态url)拼接传值
            // 1.在路由配置对象中,添加动态路由配置
            //   { path: "/main/:name", component: MainCom }
            // 2.在路由跳转前的组件内,给路由路径后添加/拼接数据传值
            // < router - link :to = "'/main/'+msg" > 主页</router - link >
            // 3.在路由跳转后的组件内,使用$route对象调用params字段接收数据
            // $route.params.name  this.$route.params.name
3.query对象传值
            // 1.在路由跳转前的组件内,给to绑定一个对象,path设置路径,query设置字段
            // <router-link :to="obj">主页</router-link>
            // 2.在路由跳转后的组件内,使用$route对象调用query字段接收数据
            // $route.query.name  this.$route.query.name

4.命名路由传值
        // 1.在路由配置对象中添加name字段设置命名路由
        // { path: "/main", component: MainCom,name:"吴亦凡"},
        // 2.在路由跳转前的组件内,给to绑定一个对象,name设置路由名,params设置字段
            // <router-link :to="obj">主页</router-link>
                // return{
                //         name:"吴亦凡",//命名路由可通过路由名跳转
                //         params:{//命名路由传值使用params
                //             name:this.msg
                //         }
                //     }
        // 3.在路由跳转后的组件内,使用$route对象调用params字段接收数据
        // $route.params.name  this.$route.params.name

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