安裝 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 功能請參考文檔:官方文檔