vue路由守卫

  1. 可以在路由文件中设置,这个是进入路由前的守卫
  { path: '/hookRouter',
      name: 'hookRouter',
      component: hookRouter,
      beforeEnter:(to,from,next)=>{
        console.log('准备进入路由守卫模板');
        console.log(to);
        console.log(from);
        next();
      },
    },

有三个参数:
to:路由将要跳转的路径信息,信息是包含在对像里边的。
from:路径跳转前的路径信息,也是一个对象的形式。
next:路由的控制参数,常用的有next(true)和next(false)。

  1. 还可以在组件模板中设置
export default {
        name: "hookRouter",
	      beforeRouteEnter:(to,from,next)=>{
	        console.log("准备进入路由模板");
	        //   console.log(to);
	        //   console.log(from);
	        setTimeout(()=>{
	          next(true);
	        },2000)

	      },
	      beforeRouteLeave: (to, from, next) => {
	        console.log("准备离开路由模板");
	          console.log(to);
	          console.log(from);
	        setTimeout(()=>{
	          next(true);
	        },2000)

	      }
    }

你可能感兴趣的:(vue)