在上一篇的博文中，實現的跳轉是在頁面中進行實現的
利用vue-router實例方法，使用js對路由進行動態跳轉；
1、router.push：參數為路由對象，跳轉到指定路由，跳轉后會產生歷史記錄；
<!--動態跳轉的按鈕-->
<div>
<button @click="push">push返回首頁</button>
</div>
new Vue({ //router : router router : myRouter, //4 注入路由 簡寫 methods:{ push(){ myRouter.push({ path:'/home' }) } } }).$mount("#one");
2、router.replace：參數為路由對象，跳轉到指定路由，跳轉后不產生歷史記錄；
由效果圖可以發現點擊replace前往美食廣場按扭得時候並不會產生任何的歷史記錄
<!--動態跳轉的按鈕-->
<div>
<button @click="push">push返回首頁</button>
<button @click="replace">replace前往美食廣場</button>
</div>
methods:{ push(){ myRouter.push({ path:'/home' }) }, replace(){ myRouter.replace({ path:'/foods' }) } }
3、router.go：參數為number，number為正向前跳轉，為負向后跳轉，根據number的值跳轉到對應頁面，前提是必須有歷史記錄可供跳轉；
4、router.back：無參，后退一個頁面，需要有歷史記錄；
router.forward：無參，前進一個頁面，需要有歷史記錄；
使用的代碼：
<!--動態跳轉的按鈕-->
<div>
<button @click="push">push返回首頁</button>
<button @click="replace">replace前往美食廣場</button>
<button @click="go(-1)">go(-1)后退歷史記錄</button>
<button @click="go(2)">go(2)前進歷史記錄</button>
<button @click="back">back返回</button>
<button @click="forward">forward前進</button>
</div>
methods:{ push(){ myRouter.push({ path:'/home' }) }, replace(){ myRouter.replace({ path:'/foods' }) }, go(n){ myRouter.go(n); }, back(){ myRouter.back(); }, forward(){ myRouter.forward(); } }
以上就是通過js實現動態的跳轉
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 路由的動態跳轉</title> 6 </head> 7 <body> 8 <div id="one"> 9 <router-link to="/home">首頁</router-link> 10 <router-link to="/foods">美食</router-link> 11 12 <div> 13 <!--將數據顯示在這里--> 14 <router-view></router-view> 15 </div> 16 <!--動態跳轉的按鈕--> 17 <div> 18 <button @click="push">push返回首頁</button> 19 <button @click="replace">replace前往美食廣場</button> 20 21 <button @click="go(-1)">go(-1)后退歷史記錄</button> 22 <button @click="go(2)">go(2)前進歷史記錄</button> 23 24 <button @click="back">back返回</button> 25 <button @click="forward">forward前進</button> 26 </div> 27 </div> 28 </body> 29 <template id="foods"> 30 31 32 <div> 33 34 <h2>美食廣場</h2> 35 <ul> 36 <router-link to="/foods/bjc/北京烤鴨/68" tag="li"> 北京菜</router-link> 37 <router-link to="/foods/hnc" tag="li"> 湖南菜</router-link> 38 <router-link to="/foods/xc?name=剁椒魚頭&price=128" tag="li"> 湘菜</router-link> 39 <router-link :to="ycParam" tag="li"> 粵菜</router-link> 40 <router-link :to="sccParam" tag="li"> 四川菜</router-link> 41 </ul> 42 43 <router-view></router-view> 44 </div> 45 </template> 46 47 <script type="text/javascript" src="../js/vue.js" ></script> 48 <script type="text/javascript" src="../js/vue-router.js" ></script> 49 <script> 50 51 //1 定義組件 52 let Home = { 53 template : "<h2>首頁</h2>" 54 } 55 let Foods = { 56 template : "#foods", 57 data(){ 58 59 return{ 60 sccParam:{ 61 62 name:'sccRouter', 63 64 params:{ 65 66 name:"麻婆豆腐", 67 price:28 68 } 69 }, 70 71 ycParam:{ 72 path:'/foods/yc', 73 query:{ 74 name:"蜜汁叉燒", 75 price:56 76 77 } 78 79 } 80 } 81 } 82 } 83 84 //定義foods中的子組件 85 86 let Bjc={ 87 88 props:['name','price'], 89 template : "<h3>北京菜 菜名：{{name}} 價格：{{price}}</h3>" 90 91 } 92 93 let Hnc={ 94 template : "<h3>湖南菜 </h3>" 95 96 } 97 let Xc={ 98 props:['name','price'], 99 template : "<h3 >湘菜 菜名：{{name}} 價格：{{price}}</h3>" 100 101 } 102 103 let Yc={ 104 props:['name','price'], 105 template : "<h3>粵菜 菜名：{{name}} 價格：{{price}}</h3>" 106 107 } 108 109 let Scc={ 110 props:['name','price'], 111 template : "<h3>四川菜 菜名：{{name}} 價格：{{price}}</h3>" 112 113 114 115 } 116 117 //2 配置路由 路由可能有多個 118 const myRoutes = [ 119 { 120 path : "/home", 121 component : Home 122 }, 123 { 124 path : "/foods", 125 component : Foods, 126 127 children:[ 128 { 129 path:"bjc/:name/:price",//定義其屬性 130 component:Bjc, 131 props:true 132 133 134 }, 135 { 136 path:"hnc", 137 component:Hnc 138 139 140 }, 141 142 { 143 path:"xc", 144 component:Xc, 145 props : (route) => ({ 146 name : route.query.name, 147 price : route.query.price 148 }) 149 150 151 }, 152 { 153 path:"yc", 154 component:Yc, 155 props:{ 156 157 name:'蜜汁叉燒量版式', 158 price:648 159 } 160 161 162 }, 163 { 164 name:'sccRouter', 165 path:"scc", 166 component:Scc, 167 props:true 168 169 170 } 171 172 173 174 175 176 ] 177 }, 178 { 179 path:"*", 180 redirect:"/home" 181 } 182 ] 183 184 // 3 創建路由對象 185 const myRouter = new VueRouter({ 186 //routes : routes 187 routes : myRoutes, 188 //mode:'history' 189 linkActiveClass : "active" 190 191 }); 192 193 new Vue({ 194 //router : router 195 router : myRouter, //4 注入路由 簡寫 196 methods:{ 197 push(){ 198 199 myRouter.push({ 200 201 path:'/home' 202 }) 203 }, 204 replace(){ 205 myRouter.replace({ 206 207 path:'/foods' 208 }) 209 }, 210 211 go(n){ 212 213 myRouter.go(n); 214 }, 215 back(){ 216 myRouter.back(); 217 }, 218 forward(){ 219 220 myRouter.forward(); 221 } 222 } 223 }).$mount("#one"); 224 </script> 225 <style> 226 227 228 .active{ 229 color: white; 230 231 background-color: black; 232 } 233 </style> 234 </html>