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，會不導航；如果為路徑，則會導航到指定路徑下的頁面。
總結
以上所述是小編給大家介紹的vue router 組件的高級應用實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
