先丟擲一個問題,在SPA專案中如何修改網頁標題?
網頁標題是通過<title></title>來顯示的,但是SPA只有一個固定的HTML,切換到不同頁面時,標題並不會變化,但是可以通過JavaScript修改.
　　window.document.title = '要修改的標題'
　　那麼問題來了,在VUE工程裡,在哪裡,什麼時候修改呢?比較理想的一個方法是,在路由頁面發生改變時,統一配置.vue-router提供了導航鉤子beforeEach和afterEach,它們會在路由即將改變和改變後觸發,所以設定標題可以在beforeEach中完成.

// main.js
const Routers = [
	{
		path:'/index',
		meta:{
			title:'首頁'
		},
		component:(resolve)=>require(['../view/index.vue'],resolve)
	},
	{
		path:'/about',
		meta:{
			title:'介紹頁面'
		},
		component:(resolve)=>require(['../view/about.vue'],resolve)
	}
]
const router = new VueRouter(RouterConfig);
router.beforeEach((to,from,next)=>{
	window.document.title = to.meta.title;
	next();
})

導航鉤子有3個引數
·to 即將進入的目標的路由物件
·from 當前導航即將要離開的路由物件
·next 呼叫該方法後才能進入下一個鉤子

　　有了這兩個鉤子，還可以做很多事情來提升使用者體驗。比如一個比較長的頁面，滾動到某個位置，在跳轉到另一個頁面，頁面滾動條預設實在上一個頁面停留的位置，而好的體驗肯定是返回頂端。通過鉤子afterEach就可以實現。

//main.js
router.afterEach((to,form,next)=>{
    window.scrollTop(0,0);
}

　　next() 方法可以設定引數，例如如下場景：

　　某些頁面需要判斷是否登入，如果登入了可以訪問，否則跳轉到登入頁面。這裡我們通過 localStorage來簡易判斷：

route.afterEach((to,form,next)=>{
	if(window.localStorage.getItem('token')){
		next();
	}else{
		next('/login');
	}
})