vue-router入門 · 前端工程化指南

[TOC] ## 前言設置vue的router是必備的知識點，通過本篇你將得到官網基本的知識點解析以及相關的理解。部分知識點還會有案例提供。 ## 官網文檔 * [官方vue-router2.0的中文文檔](https://router.vuejs.org/zh-cn/) ## 基礎 ### 頁面使用 ~~~ <div id="app"> <h1>Hello App!</h1> <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> ~~~ ### 動態路由 * 訪問路徑中帶查詢參數的，影響路由定義 ~~~ const router = new VueRouter({ routes: [ // 動態路徑參數以冒號開頭 { path: '/bookDetail/:id', component: bookDetail } ] }) //頁面中定義 <router-link :to="'/bookDetail/' +book.id" > {{book.id}}</router-link> //編程式導航 router.push({ name: 'bookDetail', params: { id: 123 }}) ~~~ | 模式 | 匹配路徑 | $route.params | | --- | --- | --- | | /user/:username | user/evan | { username: 'evan' } | | /user/:username/post/:post_id | /user/evan/post/123 |{ username: 'evan', post_id: 123 } | * 除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query（如果 URL 中有查詢參數）、$route.hash 等等。詳細參考地址：[route-object](https://router.vuejs.org/zh-cn/api/route-object.html)。對于$route.query的使用：url中直接拼接就可以，不影響路由定義 ~~~ //頁面中 <router-link :to="'infoplan?id='+scope.row.id"> //腳本導航，帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }} //使用 this.$route.query.id //路由定義 path:'infoplan' ~~~ ### 路由參數變化時，組件不會渲染解決方案：因為vue默認是同一路由時不會重復渲染，所以需要做監聽，當參數變化時，重新獲取數據。寫法如下: ~~~ watch: { '$route' (to, from) { // 對路由變化作出響應... } } ~~~ ### 定義路由指定的參數有path,name,component,其中path為#/之后的路徑，name為路由別稱，component為路由指向的組件。針對任何不在路由設定之內的可以使用path:'*' 來匹配，針對需要攔截的情況使用鉤子函數。 ~~~ // 每個路由應該映射一個組件。其中"component" 可以是 //通過 Vue.extend() 創建的組件構造器，或者，只是一個組件配置對象。 //定義工具函數方法引入需要的組件（推薦使用），這個是路由的懶加載的寫法。 const compLoad = (name) => (resolve) => require([`@/components/${name}`], resolve) const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] ~~~ ### 嵌套路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，最常見的后臺系統以及多層遞進的窗口都可能是多層路由的。在直接的父路由的情況下，可能沒有對應的組件渲染，這時候需要提供一個默認的路由組件。要在嵌套的出口中渲染組件，需要在 VueRouter 的參數中使用 children 配置： ~~~ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 當 /user/:id/profile 匹配成功， // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當 /user/:id/posts 匹配成功 // UserPosts 會被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ] } ] }) ~~~ * **要注意，以 / 開頭的嵌套路徑會被當作根路徑。這讓你充分的使用嵌套組件而無須設置嵌套的路徑**。 * ### router 實例，配置使用 ~~~ // router 實例，然后傳 `routes` 配置 // 你還可以傳別的配置參數, 不過先這么簡單著吧。 const router = new VueRouter({ routes // （縮寫）相當于 routes: routes }) //配置使用router var app=new Vue({ router }).$mount('#app') ~~~ ### 聲明式導航（to綁定鏈接地址） `<router-link :to="...">` ### 編程式導航除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。 ~~~ //基本格式 router.push(location) // 字符串，不帶任何參數的 router.push('home') // 對象 router.push({ path: 'home' }) // 命名的路由，帶簡單的參數列表的，會用多個斜杠分開 router.push({ name: 'user', params: { userId: 123 }}) // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) ~~~ ### 獲取url參數 * 如果你想獲取url上的參數，需要保證傳入時按照規定的格式，那么你規定路由時以及使用參數參考下面的。多參的時候加&連接就可以了。下面規定的是不帶參數名稱的形式。 ~~~ //頁面書寫 <router-link :to="'/bookDetail/' +book.id+'&'+book.type" > {{book.id}}{{book.pubdate}}</router-link> //也可以通過腳本push跳轉,也稱為編程式導航 this.$router.push({name:'infoplan',params:{id:id}}) //規定路由參數 { path: '/bookDetail/:id&:type', name: 'bookDetail', component: vueLoad('bookDetail') } //使用路由參數,寫在created函數中生效，這里是route不是router，切記 created(){ this.id=this.$route.params.id; this.type=this.$route.params.type; } ~~~ ### 特殊路由 404 因為其他錯誤頁面配置與正常頁面沒有什么差別，只有404頁面是特殊的，404頁面針對的是當前地址匹配不到任何路由地址，所以其地址匹配是正則形式的，除了這點還要注意404的路由必須寫在所有路由最后的位置，否則會覆蓋其他路由不能生效。 ~~~ { path: '/*', name: '404', component: _import('notFound') } ~~~ ## 進階 ### 路由懶加載也就是進入頁面時才加載對應的路由資源，更加方便，打包時也打包出更多的文件。可以采用官方的寫法，也可以使用require.ensure寫法。需要注意的是：1 組件的寫法不用變化 2 目前不支持動態載入組件。 ~~~ let index = ()=>import('@/views/index') let index = resolve=>require(['@/views/index'],resolve) let index = ~~~ 當然標準的寫法還是require.ensure ,參考：[代碼分割ensure寫法](http://www.css88.com/doc/webpack2/guides/code-splitting-require/) 示例如下： ~~~ require.ensure(dependencies: String[], callback: function(require), chunkName: String) let index = ( )=>require.ensure([],() => r(require('../page/home')), 'home'); ~~~ 如果需要把某些文件打包到一個文件中，可以通過，需要webpack 2.4以上的版本呢支持才可以。 ~~~ const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') ~~~ ### 權限路由權限路由是指針對路由部分，前端寫成全部路由，但是在前端菜單渲染的時候，寫成根據接口數據進行匹配的部分，然后進行菜單過濾，最終只得到匹配的部分。這個匹配的關鍵字可以是路徑，name,或者權限點，不包含這個權限點的可以不用顯示。(權限點可以設置到meta信息中) 特別備注：有些時候權限是分子集的，路由也分子路由，當我們針對某些父路由，也需要設置默認一個組件，但這樣會與我們設置子路由組件時沖突的，那么此時我們是一般設置父路由默認進入一個子路由，然后其默認進入的子路由，地址設置為空。代碼如下： ~~~ { path: '/report', name: 'report', meta:{}, component: viewloader('reportlist'), children:[ { path:'', name:'reportlist', meta:{}, component: viewloader('reportList'), }, { path:'', name:'reportDetail', meta:{}, component: viewloader('reportDetail'), } ] }, ~~~ 當然你也可以設置一個默認的面板，這個面板可以展示一些公共內容，包含其他子路由的入口。 ~~~ { path: '/report', name: 'report', meta:{}, component: viewloader('reportDefault'), children:[ { path:'list', name:'reportlist', meta:{}, component: viewloader('reportList'), }, { path:'', name:'reportDetail', meta:{}, component: viewloader('reportDetail'), } ] }, ~~~ **深入思考：** 關于權限的部分，我們肯定希望其是固定的并且是更新的，固定的可以用vuex或者web storage實現，把菜單的數據保存下，保證刷新或者切換時路由信息不會丟失；更新的則是用戶在登錄或者及時性很強的操作中，需要及時的替換去菜單部分數據，保證最新。 ### 路由優先級如果一個地址可以匹配多個路由，誰先定義的，誰的優先級就高，這也解釋了為什么我們的404匹配路由要寫在最后。 ### 高階路由 vue-router 使用 path-to-regexp 作為路徑匹配引擎，所以支持很多高級的匹配模式，例如：可選的動態路徑參數、匹配零個或多個、一個或多個，甚至是自定義正則匹配。查看它的 [文檔](https://github.com/pillarjs/path-to-regexp#parameters) 學習高階的路徑匹配，還有這個例子展示 vue-router 怎么使用這類匹配。 ### 多業務路由如果你有多層的路由，都維護在一個router文件肯定是不方便的，建議你將他們維護在多個業務的路由模塊，具體寫法如下： ~~~ //router/index.js import system from './system' import customer from './customer' const routes = [...system,...customer,...defaultRouters] //router/system.js export default [ { path:'', name:'', component:'' meta:{}, children:[], } ] ~~~ ### 路由鉤子函數在路由的鉤子函數中，我們處理一些效果，進行一些攔截，下面舉例說明：核心語法： ~~~ //全局前置鉤子 router.beforeEach((to, from, next) => { // ... }) //全局置后鉤子 router.afterEach((to, from) => { // ... }) // 2.2之后新增路由更新操作 ~~~ 備注：如果覺得我就某些頁面寫鉤子太麻煩，你也可以在路由里直接定義好路由部分對應的鉤子函數執行對應的操作。 ~~~ const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) ~~~ - 登錄攔截 - 非關鍵頁面攔截 - 攜帶頁面位置信息 - 加載動畫 - ### 組件內的導航守衛也可以直接在組件里定義好自己的導航守衛，做一些高級的程序條件鑒定。 ~~~ const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調用 // 不！能！獲取組件實例 `this` // 因為當守衛執行前，組件實例還沒被創建 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變，但是該組件被復用時調用 // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。 // 可以訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調用 // 可以訪問組件實例 `this` } } ~~~ ### 完整的導航解析過程 1. 導航被觸發。 2. 在失活的組件里調用離開守衛。 3. 調用全局的 beforeEach 守衛。 4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。 5. 在路由配置里調用 beforeEnter。 6. 解析異步路由組件。 7. 在被激活的組件里調用 beforeRouteEnter。 8. 調用全局的 beforeResolve 守衛 (2.5+)。 9. 導航被確認。 10. 調用全局的 afterEach 鉤子。 11. 觸發 DOM 更新。 12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。 ### 同一組件渲染 ### 路由元信息定義路由的時候可以定義meta字段 ~~~ const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] }) ~~~ 它的訪問時這樣的：直接路由中匹配到的路由.meta.keyname . - 拓展：既然是這樣，可能有什么作用呢？ > 1 基于登錄的判斷，你可以設置一個字段用來決定這個頁面是否需要登錄訪問 > 2 基于刷新的判斷，也許你很多組件都用了keep-alive的特性，對于有些頁面你不想使用，可以定義一個字段區分 > 3 定義或者使用一些初始化字段，或者頁面初始化信息，屬于全局比較公用的一些，不想每個頁面都去維護 > 4 其他自定義的需求字段都是可以加的，自由發揮，作為一種解決方案可以實現很多你想做的個性需求。 ### 加載動畫 ### 加載優化 ### 保持數據 ### 運行模式 ## 路由傳參 ## 文檔