路由守卫#

1/*
2  router.beforeEach((to,from,next)=>{})
3    to: 即将进入的路由对象
4    from：即将离开的路由对象
5    next：向下运行（符合规则，就让你向下执行）
6*/
7
8router.beforeEach((to, from, next) => {
9  if (to.path == '/cart') {
10    let token = localStorage.getItem('token')
11    if (token) {
12      next()
13    } else {
14      setTimeout(() => {
15        next('/user')
16      }, 1000)
17    }
18    return;
19  }
20  next()
21})

1/*
2	beforeEnter(to,from.next){}
3		to: 即将进入的路由对象
4    from：即将离开的路由对象
5    next：向下运行（符合规则，就让你向下执行）
6*/
7{
8  path:"/move",
9  component:Move,
10  beforeEnter(to,from,next){
11    // 业务逻辑
12  }
13}

1/*
2	beforeRoutrEnter(to,from,next){
3		// 在组件实例被创建之前执行（在beforeCreate生命周期函数之前执行）
4		// 不能获取组件实例 `this` 因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
5	}
6	
7	beforeRouteUpdate(to,from,next){
8		// 当前组件路由动态更新时触发
9		// 举例：对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
10		// 由于会渲染同样的 Foo组件，因此组件实例会被复用。而这个钩子函数就会在这个情况下被调用
11		// 可以访问组件实例 `this`
12	}
13	
14	beforeRouteLeave(to,from,next){
15		// 离开当前组件对应的路由时触发
16		// 可以访问组件实例 `this`
17		// 这个离开守卫 通常用来预防用户在还未保存修改前突然离开。
18		// 该导航可以通过返回 `false` 来取消。
19	}
20*/
21
22// 写在单页面组件中（.vue的文件）
23// 只有在home页面可以访问这个公共的组件，其他的页面不允许访问
24
25beforeRouteEnter(to,from,next){
26  if(from.path == "/home"){
27    next()
28  }else{
29    alert('没有权限')
30  }
31}

1/*
2	router.afterEach(to,from)=>{
3		// 没有next
4		document.title = to.meta.title		// 修改网页的title
5	}
6*/

1const router = new VueRouter({
2  mode: "history",
3  base: process.env.BASE_URL,
4  routes,
5  scrollBehavior(to,from,savedPosition){
6  	// return 期望滚动到哪个的位置
7    if(savePosition){
8      return savePostion
9    }else{
10      return {x:0,y:0}
11    }
12	}
13});