• 官方文檔：router.vuejs.org/

---

一、配置

方式一

• main.js中：

  import Vue from 'vue' import Router from 'vue-router' import Hello from './components/Hello.vue'Vue.use(Router);const router=new Router({routes:[{path:'/hello',component:Hello}] });new Vue({router,render:h=>h(App), }).$mount('#app'); 復制代碼

• App.vue中：

  <div id='app'><router-link to='/hello'></router-link><router-view></router-view> </div> 復制代碼

方式二

• router.js中：

  import Vue from 'vue' import Router from 'vue-router' import Hello from './components/Hello.vue'Vue.use(Router);export default new Router({routes:[{path:'/hello',component:Hello}] }) 復制代碼

• main.js中：

  import router from './router.js'new Vue({router,render: h => h(App), }).$mount('#app') 復制代碼

• App.vue中：

  <div id='app'><router-link to='/hello'></router-link><router-view></router-view> </div> 復制代碼

二、動態路由匹配

• 對于多個路徑匹配同一個組件的情況（例如User組件顯示的是不同用戶的信息：/user/foo和/user/bar）：

  new Router({routes:[{path:/user/:username',component:User}] }); 復制代碼

• 在User組件中可以通過this.$route.params.username獲取到當前路徑對應得的username。

• 從/user/foo切換到/user/bar，User組件不會重新渲染，因此需要通過watch來監聽：

  //User.vue watch:{'$route'(to,from){console.log(to.params.username);} } 復制代碼

  或者使用beforeRouteUpdate：

  //User.vue beforeRouteUpdate(to,from,next){console.log(to.params.username) } 復制代碼

• 若同一個路徑匹配了多個組件，則先定義的路由優先級更高：

  //`/user`路徑會指向User.vue export default new VueRouter({routes:[{path:'/user',component:User},{path:'/user',component:Admin}] }); 復制代碼

三、嵌套路由

實現方式如下：

<!--App.vue--> <router-view></router-view> <!--User.vue--> <router-view></router-view> 復制代碼export default new VueRouter({routes:[{//默認路徑path:'/',component:Hello,children:[{path:'',component:Left}]},{path:'/hello',component:Hello,children:[{path:'',component:Left},{path:'left',component:Left},{path:'right',component:Right},]},{path:'/world',component:World}] }); 復制代碼

四、用函數定向

this.$router.push()

• 參數可以是路徑字符串（router.push('home')）、定位對象（router.push({path:'home'})，router.push({name:'user',params:{userId:123}})）。
• 若參數中有path字段，那么params就會被忽略。params只能和name配合使用。
• 備選參數：onCompelete和onAbort回調函數。
• 會在歷史紀錄中添加新紀錄。

this.$router.replace

• 與push()類似。
• 區別在于，replace()不會在歷史紀錄中添加新紀錄，而是替換到當前路由。

this.$router.go(n)

• 參數n是一個整數，代表前進或后退幾步。

五、命名視圖

• 可以設置多個<router-view>并用name屬性來區分它們：

  <!--App.vue--> <router-view class="a"></router-view> <router-view class="b" name="b"></router-view> <router-view class="c" name="c"></router-view> 復制代碼//router.js export default new Router({routes:[{path:'/',components:{default:'Foo',a:Bar,b:Baz}}] }); 復制代碼

• 可以和嵌套路由組合使用。

六、重定向和別名

重定向

//router.js export default new Router({routes:[{path:'/a',redirect:'/b'},//↓配合命名路由使用↓{path:'/c',redirect:{name:'d'}}，//↓動態重定向↓{path:'/e',redirect:to=>{//接受目標路由作為參數//返回重定向的路徑}}] }); 復制代碼

別名

//router.js routes:[{path:'/a',component:A,alias:'/b'} ] 復制代碼

當你訪問/b，實際匹配到A組件，但url中還是/b。

Props

• 通過個組件設置props:[]，可以實現傳遞數據。

  <!--Compo.vue--> <template><p>{{propName}}</p> </template> <script>export default{name:'Compo',props:['propName']} </script> 復制代碼//router.js export default new Router({routes:[{path:'/compo/:propName',component:Compo,props:true},//↓命名視圖情況下，要對每個視圖設置props的值↓{path:'/compo/:propName',components:{default:Compo,sideBar:Sid},props:{default:true,sideBar:false}}] }) 復制代碼

• 當props的值為true，this.$router.params就是要傳入組件的數據。

• 當props是一個對象，那它就會作為組件的props傳入。

• 也可以用一個函數，把相關數據return給props。

History模式

• vue-router默認是Hash模式：使用URL的hash模擬完整的鏈接。

• 也可以使用history模式，這樣URL中就不帶/#了。

  //router.js export default new Router({mode:'history',routes:[...] }); 復制代碼

-history模式需要后端的設置來配合（若URL匹配不到任何靜態資源，就返回index.html，即依賴頁面），否則用戶直接在瀏覽器地址欄輸入相應的URL就會報404。但這樣，需要404頁面時也不會出現了，所以：

export default new Router({mode: 'history',routes: [{ path: '*', component: NotFoundComponent }] }) 復制代碼

總結

以上是生活随笔為你收集整理的重温Vue-router的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。