安裝 vue-router
在命令行中進入 vue 的項目目錄里，運行命令 npm install vue-router --save 來進行安裝
npm install vue-router --save
使用 vue-router
在 main.js 文件中引入 vue-router、安裝路由功能、定義組件並引入、創建 router 實例並進行配置、最后創建和掛載根實例。通過 router 配置參數注入路由，從而讓整個應用都有路由功能。代碼如下：
main.js
經過上面的配置之后呢，路由匹配到的組件將會渲染到
App.vue 里的
<router-view></router-view>（很關鍵）那么這個App.vue里應該這樣寫：
App.vue
這樣就會把渲染出來的頁面掛載到這個id為app的div里了。效果如下：
效果圖
重定向 redirect
const router = new VueRouter({ routes: [ { path: '/', redirect: '/Home'}, // 這樣進/ 就會跳轉到/home { path: '/Home', component: Home } ] }) 嵌套路由
通過 /home/info 就可以訪問到 info 組件了
const router = new VueRouter({ routes: [ { path: '/Home', component: Home, children: [ { path: 'Info', component: Info} ] } ] }) 路由懶加載
通過懶加載就不會一次性把所有組件都加載進來，而是當你訪問到那個組件的時候才會加載那一個。對於組件比較多的應用會提高首次加載速度。
const Home = () => import('./components/Home.vue') 路由對象和路由匹配
路由對象，即 $router 會被注入每個組件中，可以利用它進行一些信息的獲取:
| 屬性 | 說明 |
|---|---|
| $route.path | 當前路由對象的路徑，如 '/view/a' |
| $rotue.params | 關於動態片段（如 /user/:username )的鍵值對信息,如 {username: 'paolino'} |
| $route.query | 請求參數，如 /foo?user=1 獲取到 query.user = 1 |
| $route.hash | 當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則為空字符串 |
| $route.fullPath | 完成解析后的 URL，包含查詢參數和 hash 的完整路徑 |
| $route.matched | 一個數組，包含當前路由的所有嵌套路徑片段的路由記錄。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組) |
| $route.name | 當前路由的名稱 |
| $route.redirectedFrom | 如果存在重定向，即為重定向來源的路由的名字 |
小總結
綜合上述，一個包含重定向、嵌套路由、懶加載的 main.js 如下：
main.js
更詳細的 vue-router 功能請參考文檔：官方文檔
作者：IT散人
鏈接：https://www.jianshu.com/p/f6f92d95b5cb
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。