一、路由實例的方法
1、router.push() 添加路由，功能與<router-link>相同
2、router.push() 替換路由，不會產生歷史記錄
二、代碼實現
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由參數傳遞</title> 6 <style> 7 /*設置鏈接點擊后的顏色*/ 8 .active{ 9 color: red; 10 font-size: 24px; 11 /*去除下划線*/ 12 text-decoration: none; 13 } 14 </style> 15 <!--引入vue--> 16 <script src="../js/vue.js"></script> 17 <!-- 引入vue-router --> 18 <script src="../js/vue-router.min.js"></script> 19 </head> 20 <body> 21 22 <div id="hello"> 23 <div> 24 <!-- 使用router-link組件來定義導航，to屬性指定鏈接url --> 25 <router-link to='/home'>主頁</router-link> 26 <router-link to='/news'>新聞</router-link> 27 <router-link to='/user'>用戶</router-link> 28 </div> 29 <div> 30 <!-- router-view用來顯示路由內容 --> 31 <router-view></router-view> 32 </div> 33 </div> 34 35 <template id="user"> 36 <div> 37 <h4>用戶信息</h4> 38 <ul> 39 <li><router-link to='/user/login?name=tom&psw=123'>登錄</router-link></li> 40 <li><router-link to='/user/regist/alice/456'>注冊</router-link></li> 41 </ul> 42 <!-- router-view用來顯示路由內容 --> 43 <router-view></router-view> 44 45 <!-- 添加路由 --> 46 <button @click='backToHome'>跳轉到首頁</button> 47 <!-- 替換路由 --> 48 <button @click='replaceToHome'>替換到首頁</button> 49 </div> 50 </template> 51 52 <script> 53 //1.定義組件 54 var Home={ 55 template:'<h3>我是主頁</h3>' 56 } 57 var News={ 58 template:'<h3>我是新聞</h3>' 59 } 60 var User={ 61 template:'#user', 62 methods:{ 63 backToHome(){ 64 router.push({path:'/home'}); //添加路由，跳轉到home頁面 65 }, 66 replaceToHome(){ 67 router.replace({path:'/home'}); //替換路由，替換到home頁面 68 }, 69 70 } 71 } 72 var Login={ 73 template:'<h5>用戶登錄的界面 用戶名：{{$route.query.name}} 密碼：{{$route.query.psw}}</h5>' 74 } 75 var Regist={ 76 template:'<h5>用戶注冊的界面 用戶名：{{$route.params.username}} 密碼：{{$route.params.password}}</h5>' 77 } 78 79 //2.配置路由 80 const routes=[ 81 {path:'/home',component:Home}, 82 {path:'/news',component:News}, 83 { 84 path:'/user', 85 component:User, 86 children:[ //配置子路由 87 {path:'login',component:Login}, 88 {path:'regist/:username/:password',component:Regist} 89 ] 90 }, 91 {path:'*',redirect:'/home'} //路由重定向，實現默認顯示首頁 92 ] 93 94 //3.創建路由實例 95 const router=new VueRouter({ 96 routes:routes, //第一個routes是選項，第二個routes是配置路由時自定義的變量名。二者同名，可以直接簡寫為routes 97 mode:'history', //路由的模式設置為history（默認為hash模式） 98 linkActiveClass:'active' //更改活動鏈接的class類名 99 }); 100 101 //4.將創建的路由實例掛載到Vue實例上 102 let vm = new Vue({ 103 el:'#hello', 104 router:router, //第一個router是選項，第二個router是創建路由實例時自定義的變量名。二者同名，可以直接簡寫為router 105 }); 106 </script> 107 </body> 108 </html>
三、效果展示
