vue-router 路由管理

前言

文章涉及的內容可能不全面，但量不少，須要慢慢看。我花了很長的時間整理，用心分享心得，但願對你們有所幫助。可是不免會有打字的錯誤或理解的錯誤點，但願發現的能夠郵箱告訴我1163675970@qq.com，我會及時的進行修改，只但願對你有所幫助，謝謝。

vue-router 路由管理

參考文獻

router.vuejs.org/zh/

1.SPA VS MPA

• SPA：single page application 單頁面應用

  • iframe

  • AMD/CMD + 打包工具

  • 專業的路由管理模塊 vue-router / react-router-dom

• MPA：multi page application 多頁面應用

2.vue-router的基礎歸納

下載

$ npm i vue-router
OR
$ yarn add vue-router
複製代碼

實現方式

1.const router = new VueRouter({
2.  mode: 'history | hash（默認）',
3.  routes: [...]
4.})
複製代碼

• HASH模式 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載，根據不一樣的值，渲染指定DOM位置的不一樣數據；

• HISTORY模式 利用 H5 的 history API 來實現，這樣保證 URL 就像正常的 URL，而不會向 HASH 模式中那麼醜！可是這種方式須要服務器對請求URL的支持和處理 （防止頁面刷新的時候，因地址不存在而引起的404錯誤）

1.window.history.back() / window.history.go(-1) : 回退
2.window.history.forward() / window.history.go(1) : 前進
3.window.history.length 查看歷史堆棧中的頁面記錄數量
4.
5.history.pushState(state, title, url|?xxx=xxx) ： 添加並激活一個歷史記錄條目（可是此時並無實現頁面的跳轉，或者說瀏覽器並未從新加載頁面，再次刷新纔會加載）
6.history.replaceState(state, title, url)：修改當前激活的歷史記錄條目
7.window.onpopstate=function(ev){
8.    //=>監聽處於激活狀態的歷史記錄條目發生變化
9.}
複製代碼

3.vue-router的基礎使用

首先根據產品需求配置路由表

1.import Router from 'vue-router';
2.Vue.use(Router);
3.export default new Router({
4.    mode:'xxx',
5.    //=>一級路由
6.    routes:[{
7.        path:'/', //=>路由路徑（後期跳轉和匹配的時候須要，例如：<router-link to='/'> 或者 :to='{path:'/'}'）
8.        name:'xxx', //=>命名路由（後期可基於 <router-link :to='{name:'xxx'}'> 跳轉）
9.        props:true, //=>若是有動態路由傳遞參數，直接把參數信息當作屬性傳遞給組件，例如：path:'/list/:type/:id'，組件中就能夠基於 props:['type','id'] 獲取傳參到的信息，跳轉的時候能夠 this.$router.push('/list/teacher/1000') 跳轉和傳遞信息，固然不這樣處理，也能夠基於 this.$router.params 來獲取傳遞的參數
10.        //component:xxx, //=>渲染的組件
11.        //component:_=>{
12.            //return import('xxx'); //=>返回的是一個promise實例（內部保存瞭解析並編譯xxx.vue後獲得的一個模塊） 
13.        //},
14.        component:{
15.            //=>也能夠是一個對象，項目中可能會出現兩個<router-view>同時使用，此時給其設置name='xxx'，這樣在路由表中就能夠基於不一樣的名字來渲染多個組件了
16.            default:xxx,
17.            view2:xxx
18.        }
19.    },{
20.        path:'/home',
21.        component:xxx,
22.        //=>二級路由
23.        children:[{
24.            path:'',
25.            //=>路由重定向
26.            //redirect:'/home/list',
27.            //redirect:to=>'/home/list',
28.            redirect:{
29.                path:'/home/list', //=>或者 name='xxx' 來跳轉也能夠
30.                params:{xxx:xxx}, //=>可傳遞參數信息
31.            }
32.        },{
33.            path:'/home/add', //=>也能夠寫成 path='add'
34.            component:xxx
35.        }]  
36.    },{
37.        //=>404頁面處理，也能夠重定向
38.        path:'*',
39.        component:ErrorComponent
40.    }]
41.});
42.
43.-----------------------------------------
44.import router from './router';
45.new Vue({
46.    router,
47.    ...
48.})
複製代碼

其次構建路由視圖容器（命名視圖）

1.<router-view></router-view>
2.<router-view name='view2'></router-view>
複製代碼

最後實現路由跳轉和傳參（編程式導航）

1.<router-link to='/xxx'></router-link>
2.//=>傳遞參數
3.<router-link :to='{name:'xxx',params:{xxx:xxx}}'></router-link>
4.
5./*編程式導航：JS中實現跳轉*/
6.this.$router.push('/xxx');
7.this.$router.push({name:'xxx',params:{id:100}}); //=>/xxx/100
8.this.$router.push({path:'/xxx/100'});
9.this.$router.push({path:'/xxx',query:{id:100}})；//=>/xxx?id=100 獲取this.$router.query.id
10.this.$router.go(-1);
11....
複製代碼

動態路由

1.export default new Router({
2.    routes:[{
3.        path:'/xxx/:n/:m'
4.    }]
5.})
6.
7.this.$router.push('/xxx/100/200');
8.
9.this.$router.params = {
10.    n:100,
11.    m:200
12.}
複製代碼

4.導航守衛（路由權限校驗）

「導航」表示 路由正在發生改變

• 全局守衛 （寫在路由表末尾）

1.//=>全局前置守衛 
2.router.beforeEach((to,from,next)=>{
3.    //=>to：即將要進入的路由
4.    //=>from：即將要離開的路由
5.    //=>next()：進行管道中的下一個鉤子
6.    //=>next(false)：終斷當前導航
7.    //=>next('/xxx')：當前導航終斷，進入到下一個導航（和$router.push同樣）
8.});
9.
10.//=>router.beforeResolve 全局解析守衛（導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用）
11.
12./=>全局後置鉤子（沒有next）
13.router.afterEach((to, from) => {
14.  // ...
15.});
複製代碼

• 路由獨享守衛

1.const router = new VueRouter({
2.  routes: [
3.    {
4.      path: '/xxx',
5.      component: xxx,
6.      beforeEnter: (to, from, next) => {
7.        // ...
8.      }
9.    }
10.  ]
11.})
複製代碼

• 組件內守衛

1.const xxx = {
2.  template: `...`,
3.  beforeRouteEnter (to, from, next) {
4.    // 在渲染該組件的對應路由被 confirm 前調用
5.    // 不！能！獲取組件實例 `this`
6.    // 由於當守衛執行前，組件實例還沒被建立
7.  },
8.  beforeRouteUpdate (to, from, next) {
9.    // 在當前路由改變，可是該組件被複用時調用
10.    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
11.    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
12.    // 能夠訪問組件實例 `this`
13.  },
14.  beforeRouteLeave (to, from, next) {
15.    // 導航離開該組件的對應路由時調用
16.    // 能夠訪問組件實例 `this`
17.  }
18.}
複製代碼

完整的導航解析流程

1.導航被觸發。

2.在失活的組件裏調用離開守衛。

3.調用全局的 beforeEach 守衛。

4.在重用的組件裏調用 beforeRouteUpdate 守衛 。

5.在路由配置裏調用 beforeEnter。

6.解析異步路由組件。

7.在被激活的組件裏調用 beforeRouteEnter。

8.調用全局的 beforeResolve 守衛 。

9.導航被確認。

10.調用全局的 afterEach 鉤子。

11.觸發 DOM 更新。

12.用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數