前言
地址欄路由的發展經歷了后端路由配置階段、前后端分離階段、直至單頁面富應用階段。本文來總結一下 vue-router 的相關知識點和用法。
正文
1、什么是 vue-router 路由
路由就是SPA（單頁應用）的路徑管理器,vue-router就是WebApp的鏈接路徑管理系統。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和組件的，路由用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。總之，在vue中頁面路徑的改變就是組件的切換。
2、通過router-link訪問路由實例
（1）普通路由的使用，分如下三步：
a、注冊路由組件並定義路由表
b、創建路由實例並掛載到根實例
c、通過 router-link 組件來導航路由,通過router-view來渲染對應的組件，同時導航欄地址跳轉。
具體代碼如下：
<body> <div id="app"> <p> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <router-link to="/foo">Go to Foo</router-link> <router-link :to="{name:'bar',params: { bar: 123 }}">Go to Bar</router-link> <router-link :to="{name:'car',query: { car: 234 }}">Go to Car</router-link> </p> <!-- 路由出口:路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </body> <script> // 定義 (路由) 組件。 // 可以從其他文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const Car = { template: '<div>Car</div>' } //定義路由表 // 每個路由應該映射一個組件。 其中"component" 可以是 // 通過 Vue.extend() 創建的組件構造器， // 或者，只是一個組件配置對象。 // 我們晚點再討論嵌套路由。 const routes = [ { path: '/foo', name: 'foo',component: Foo }, { path: '/bar', name: 'bar',component: Bar }, { path: '/car', name: 'car',component: Car } ] // 創建 router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數, 不過先這么簡單着吧。 const router = new VueRouter({ routes // (縮寫) 相當於 routes: routes }) // 創建和掛載根實例。 // 記得要通過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') </script>
上面的代碼中，通過router-link訪問路由實例，第一個標簽中to屬性值匹配路由表中path屬性，后面兩個通過name值去匹配路由表中的name屬性，並且分別傳遞了參數，注意觀察對應的地址欄變化。
（2）嵌套路由
<body> <div id="app"> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> </body> <script> const Foo = { template: '<div>foo</div>' } const Bar = { template: `<div> <router-link to="/bar/car">to Car</router-link> <router-link :to="{name:'dar',query:{dar:123}}">to Dar</router-link> <router-view></router-view> </div>` } const Car = { template: '<div>Car</div>' } const Dar = { template: '<div>Dar</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar, children: [ { path: 'car',name:"car", component: Car },// 這里需要注意子路由path的用法，若前面加了"/" 表示該路由為根路徑，router-link中to 需要對應根路徑，不推薦在子路由前加"/" { path: 'dar', name:"dar",component: Dar } ] } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script>
運行效果如下：
上面的代碼中在根路由中嵌套了子路由，同樣通過router-link的方式來訪問，也支持name屬性匹配路由表和傳遞值等操作，需要注意子路由推薦使用path屬性值不帶"/"
3、通過 $router 的實例方法訪問路由實例
通過注入路由器，我們可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由,在 Vue 實例內部，你可以通過 $router 訪問路由實例。因此你可以調用 this.$router對象完成。該方法等同於前面的聲明式訪問路由實例。
this.$router.push()該方法的參數可以是一個字符串路徑，或者一個描述地址的對象，該方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
<body> <div id="app"> <p> <button @click="handleFoo">to Foo </button> <button @click="handleBar">to Bar</button> </p> <router-view></router-view> </div> </body> <script> const Foo = { template: '<div>foo{{this.$route.params.foo}}</div>' } const Bar = { template: '<div>bar{{this.$route.query.bar}}</div>' } const routes = [ { path: '/foo', name: 'foo',component: Foo }, { path: '/bar', name: 'bar',component: Bar }, ] const router = new VueRouter({ routes }) const app = new Vue({ router, methods:{ handleFoo(){ this.$router.push({name:"foo",params:{foo:123}}) }, handleBar(){ this.$router.push({path:"/bar",query:{bar:234}}) } } }).$mount('#app') </script>
但是在重復點擊按鈕，路由重復時，控制台出現報錯，如下：
上面的報錯是因為push方法導致路由重復在當前路由，這里需要在原型上修改push方法，代碼如下：
//獲取原型對象上的push函數 const originalPush = VueRouter.prototype.push; //修改原型對象中的push方法 VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); };
除了this.$router.push()之外還有別的訪問路由實例方法，如：this.$router.replace()不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
this.$router.go(n) 在history 記錄中向前或者后退多少步，類似 window.history.go(n)。
4、this.$router 和 this.$route 的區別及使用
this.$router：是全局路由器 router 的實例，可以在任何組件內進行訪問，路由實例里面有很多屬性和方法，比如push方法。
this.$route：是當前激活的頁面的路由信息對象，包含了當前 URL 解析得到的信息，還有 URL 匹配到的路由記錄 (route records)，也有一些屬性，這個屬性是只讀的，里面的屬性是 immutable (不可變) 的，不過你可以 watch (監測變化) 它。
總之，可以在任何組件內通過 this.$router 訪問路由器，也可以通過 this.$route 訪問當前路由。
5、動態路由
某些情況下，一個頁面的path路徑可能是不確定的，比如我們進入用戶界面時，希望是如下的路徑： /user/aaaa或/user/bbbb。除了有前面的/user之外，后面還跟上了用戶的ID 這種path和Component的匹配關系，我們稱之為動態路由(也是路由傳遞數據的一種方式)。代碼如下：
<div id="app"> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar/123">Go to Bar</router-link> </p> <router-view></router-view> </div> <script> const routes = [ { path: "/foo", component: Foo }, { path: "/bar/:id", component: Bar }, ]; const router = new VueRouter({ routes, }); const app = new Vue({ router, }).$mount("#app"); </script>
運行結果如下：
寫在最后
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。
