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');
	}
})