路由傳參
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則不顯示。