說說 vue-router 組件的高級應用

1 動態設置頁面標題

頁面標題是由 <title></title> 來控制的，由於 SPA 只有一個 HTML，因此當切換到不一樣的頁面時，標題是不會發生變化的。必須經過 JavaScript 來修改 <title></title> 中的內容：

window.document.title ='xxx'
複製代碼

有一種思路是在每一個頁面的 *.vue 的 mounted 鉤子函數中，經過 JavaScript 來修改 <title></title> 中的內容。這種方式當然可行，但若是頁面不少，就會顯著增長維護成本，並且修改邏輯都是同樣的。有沒有更好的方法呢？

咱們能夠利用 vue-router 組件的導航鉤子 beforeEach 函數，在路由發生變化時，統一設置。

import VueRouter from 'vue-router';
...

//加載 vue-router 插件
Vue.use(VueRouter);

/*定義路由匹配表*/
const Routers = [{
    path: '/index',
    component: (resolve) => require(['./router/views/index.vue'], resolve),
    meta: {
        title: '首頁'
    }
},
    //一次性加載
    // {
    //     path: '/index',
    //     component: require('./router/views/index.vue')
    // },
    {
        path: '/about',
        component: (resolve) => require(['./router/views/about.vue'], resolve),
        meta: {
            title: '關於'
        }
    },
    {
        path: '/article/:id',
        component: (resolve) => require(['./router/views/article.vue'], resolve)
    }
    ,
    {//當訪問的頁面不存在時，重定向到首頁
        path: '*',
        redirect: '/index'
    }
]

//路由配置
const RouterConfig = {
    //使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
//路由實例
const router = new VueRouter(RouterConfig);

//動態設置頁面標題
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
})

new Vue({
    el: '#app',
    router: router,
    render: h => h(Hello)
})

複製代碼

咱們在路由匹配表中，爲那些須要標題的頁面，配置了 meta title 屬性：

meta: {
        title: 'xxx'
}
複製代碼

而後在 beforeEach 導航鉤子函數中，從路由對象中獲取 meta title 屬性，用於標題設置。beforeEach 有三個入參：

參數	說明
to	當前導航，即將要進入的路由對象。
from	當前導航，即將要離開的路由對象。
next	調用 next() 以後，纔會進入下一步。

效果：

2 長頁面跳轉自動返回頂端

假設第一個頁面較長，用戶滾動查看到底部，這時若是又跳轉到另外一個頁面，那麼滾動條是會默認停在上一個頁面的所在位置的。這種場景比較好的設計是：跳轉後會自動返回頂端。這能夠經過 afterEach 鉤子函數來實現，代碼以下：

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});
複製代碼

---

組合使用 beforeEach 與 afterEach，還能夠實現：從一個頁面跳轉到另外一個頁面時，出現 Loading 動畫，當新頁面加載後，再結束動畫。

3 登錄驗證

某些頁面設置了權限，只有帳號登錄過，才能訪問；不然跳轉到登陸頁。假設咱們使用 localStorage 來判斷是否登錄。

HTML5 的 localStorage 特性，用於本地存儲。它的出現，解決了 cookie 存儲空間不足的問題 cookie 中每條 cookie 的存儲空間只有 4k) ，而 localStorage 中通常是 5M，這在不一樣的瀏覽器中 大小略有不一樣 。

router.beforeEach((to, from, next) => {
    if (window.localStorage.getItem('token')) {
        next();
    } else {
        next('/login');
    }
});
複製代碼

next() 入參，若是是 false，會不導航；若是爲路徑，則會導航到指定路徑下的頁面。