vue-router高级用法

Posted 2021-02-02 zhaoliu100125

先抛出一个问题,在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‘);
	}
})