1 動態(tài)設置頁面標題
頁面標題是由 <title></title>
來控制的,因為 SPA 只有一個 HTML挂签,所以當切換到不同的頁面時疤祭,標題是不會發(fā)生變化的。必須通過 JavaScript 來修改 <title></title>
中的內容:
window.document.title ='xxx'
有一種思路是在每個頁面的 *.vue 的 mounted 鉤子函數中饵婆,通過 JavaScript 來修改 <title></title>
中的內容勺馆。這種方式固然可行,但如果頁面很多,就會顯著增加維護成本草穆,而且修改邏輯都是一樣的灌灾。有沒有更好的方法呢?
我們可以利用 vue-router 組件的導航鉤子 beforeEach 函數悲柱,在路由發(fā)生變化時锋喜,統(tǒng)一設置。
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);
//動態(tài)設置頁面標題
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戈擒,會不導航;如果為路徑艰毒,則會導航到指定路徑下的頁面筐高。