路由传参
Vue-router路由传参主要有两种：
1、查询参数
使用对象{name:'path', query:{id:'213', data:'我是参数数据'}}
2、路由参数
使用对象{name:'path', params:{foo:'bar'}}，使用路由传参，需要在router路由配置的时候path属性内加入":参数名",如：
{path:'/register/:foo', name:'register', component:Register},其中的foo就是参数名。
3、如果使用查询传参，当同一个页面存在同一个路径跳转，但是参数不同时，如果使用<router-view></router-view>标签，进行跳转时，数据可能不刷新，因为<router-view></router-view>标签监听的是锚点（即路径不变，就认为没有变化，所以数据不刷新），此时需要将<router-view></router-view>修改成
<router-view :key="$route.fullPath"></router-view>
<!DOCTYPE html> <html> <head> <title>路由传参</title> </head> <body> <div id="app"> <router-link :to="{name:'login', query:{id:'123'}}">登录</router-link> | <router-link :to="{name:'register', params:{foo:'bar'}}">注册</router-link> <button type="button" @click="goLogin">去登录</button> <router-view :key="$route.fullPath"></router-view> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> var Login = { template:`<div>我是登录页面:{{id}}</div>`, data(){ return { id: '', } }, created:function(){ this.id = this.$route.query.id; } }; var Register = { template:`<div>我是注册页面, {{ foo }}</div>`, data(){ return { foo:'', } }, created:function(){ this.foo = this.$route.params.foo; } }; Vue.use('VueRouter'); const router = new VueRouter({ routes:[ {path:'/login', name:'login', component:Login}, {path:'/register/:foo', name:'register', component:Register}, ] }); new Vue({ el:"#app", router, methods:{ goLogin(){ this.$router.push({name:'login', query:{id:'456'}}) } } }) </script> </body> </html>
4、query与params的区别
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.route.query.id和this. route.query.id和this.route.query.id和this.route.params.id。
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，query在浏览器地址栏中显示参数，params则不显示。