vue-router高級用法

先拋出一個問題,在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');
	}
})