Vue中路由的傳參
阿新 • • 發佈：2018-11-15
文章目錄
在專案開發中，需要用到路由傳參的地方往往很多，比如說根據新聞列表頁面查詢新聞詳情，此時我們就需要將該條新聞的id資訊傳遞給新聞詳情頁面。
而在vue-router中，傳參所用的關鍵字為query，其後跟引數map物件。
示例
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> </head> <body> <template id="root"> <div> <!--路由佔位--> <router-view></router-view> </div> </template> <template id="register"> <div> <h2>註冊頁面</h2> <input type="text" v-model="uname"> <button @click="registerMethod">註冊</button> </div> </template> <template id="login"> <div> <h2>登入頁面</h2> <input type="text" placeholder="請輸入登入賬號" v-model="loginName"> <button @click="loginMethod">登入</button> </div> </template> <template id="welcome"> <div> <h2>歡迎介面</h2> <h3 v-show="currentUser != ''">{{currentUser}}</h3> </div> </template> <div id="app"> <router-link to="/root/register">註冊</router-link> | <router-link to="/root/login">登入</router-link> <!--路由佔位--> <router-view></router-view> </div> </body> <script src="../../../js/vue/vue/2.0/vue.js"></script> <script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script> <script type="application/javascript"> //定義路由根元件 var App = Vue.extend({}); //根頁面 var root = Vue.extend({ template:'#root' }); //歡迎頁面 var welcome = Vue.extend({ template:'#welcome' ,data(){ return { uname:'' ,currentUser:'' } } ,created(){ //接收傳過來的引數，將其存放到本地資料域uname中 this.uname = this.$route.query.uname; //排除非空可能 if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){ this.currentUser = '歡迎您:' + this.uname + "！" } } }); //定義register頁面 var register = Vue.extend({ template:'#register' ,data(){ return { uname:'' } } ,methods:{ registerMethod(){ alert('註冊成功！使用者名稱為：' + this.uname); //跳轉到登入頁面 this.$router.push({path:'/root/login',query:{uname:this.uname}}); } } }); //定義login頁面 var login = Vue.extend({ template:'#login' ,data(){ return { uname:'' ,loginName:'' } } ,created(){ //接收傳過來的引數，將其存放到本地資料域uname中 this.uname = this.$route.query.uname; } ,methods:{ loginMethod(){ //如果沒有輸入任何資訊，則提示輸入賬號。 if(this.loginName.trim() == ''){ alert('請輸入登入賬號！'); return; } //如果填寫的登入名與註冊的賬號相一致，則登入成功！ if(this.uname == this.loginName){ alert('登入成功！'); //登入成功後跳轉到歡迎介面 this.$router.push({path:'/root/welcome',query:{uname:this.loginName}}); } else { alert('登入失敗！'); } } } }); //設定路由規則 var router = new VueRouter({ routes:[ { path:'/' ,redirect:'/root/welcome' } ,{ path:'/root' ,component:root ,children:[ { path:'register' ,component:register } ,{ path:'login' ,component:login } ,{ path:'welcome' ,component:welcome } ] } ] }); //開啟路由 new Vue({ el:'#app' ,router:router }); </script> </html>
結果
分析
上面的程式碼實現的功能是，當我們訪問首頁路徑/時，其自動跳轉到歡迎介面/root/welcome。
當我們點選註冊連結時，其會跳轉到註冊介面，我們在註冊介面註冊好使用者賬號後其會自動跳轉到登入介面，在跳轉的過程中，它會將我們在此之前註冊的賬號傳遞給登入介面，在登入介面中，如果我們填寫上正確的賬號後，其會直接跳轉到歡迎介面，如果填寫錯誤，其會彈出錯誤資訊。
當我們再次跳轉回歡迎介面後，其會將登入頁面中的使用者賬號直接給帶過來，並且在歡迎介面中展示出歡迎您:張三！
這裡需要注意的是，引數的傳遞用的是query，比如說傳遞使用者賬號，其傳參用的就是query:{uname:this.uname}
而在被跳轉到的頁面，我們使用this.$route.query.uname來接收跳轉之前頁面傳遞過來的引數。
而頁面的跳轉用到的是$router.push，比如說上面的程式碼this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});就是跳轉到歡迎介面，同時將登入介面中的使用者登入名傳遞過去。