Vue-router 進階

一、 路由的元信息

在定義路由的時候，能夠定義 meta 字段

children: [
     {
         path: 'bar',
         component: Bar,

         // a meta field  元信息
         meta: { requiresAuth: true }  這裏路由提示須要認證
     }
 ]

 

如何使用這個meta呢？

 

路由中匹配到的路徑都被稱爲路由記錄，每一個路由記錄都會被存在 $route.metched 中

因此，能夠經過訪問$route.metched 遍歷數組，得到meta值。

在 路由守衛的參數中也有對應的meta值

router.beforeEach((to, from, next) => {

 if (to.matched.some(record => record.meta.requiresAuth)) {

   // 檢查登陸狀態
   // 未登陸，就跳到登陸頁

   if (!auth.loggedIn()) {
     next({
       path: '/login',
       query: { redirect: to.fullPath }
     })
   } else {
     next()
   }
 } else {
   next() // 確保必定要調用 next()
 }
})

 

 

二、 基於路由的動畫效果

 

 

 

三、 獲取數據

 

通常是兩種：

 

1，在路由跳轉後組件渲染時獲取數據，能夠loading，每一個視圖能夠用本身的loading

2，能夠在 beforeRouteEnter  beforeRouteUpdate 中獲取數據，和路由同步或者獲取不到數據後不next().

 

四、 滾動行爲

 

切換路由路徑，對應不一樣頁面，同時vue-router還能夠保留滾動的位置信息，但僅限於支持pushState的瀏覽器。

scrollBehavior (to, from, savedPosition) {

    // 1，返回跳轉到的指定的頁面的位置
    if (to.hash) {
        return{
            selector:to.hash
        };
    }
    // 2， 返回保留的位置
    if (savedPosition) {
         return savedPosition;
    }

    // 3， 返回置頂，也是 default
    return{ x:0, y:0 };
}

 

五、 異步滾動 （2.8.0新增）

返回一個promise 得出一個預期的位置

scrollBehavior (to, from, savedPosition) {

    return new Promise(resolve, reject) {
        setTimeout( () => {
             resolve({x: 0, y: 0});
        },  2000);    // 接收 promise 傳值
    }
}

 

六、 組件懶加載方法  4 種

6.1 、es6 方式 2種

聲明高階函數

const apply = name => import(`../components/${name}.vue`);

函數引入組件

()=> import(`../components/HelloWorld.vue`);  

 

6.2 、commonJS 方式  2種

直接引用

resolve => require.ensure([], () => resolve(require('../components/HelloWorld.vue')))

函數引入

component(resolve) { require(['../components/' + name + '.vue'], resolve) }