路由前置守卫

当我们需要在正式访问加载页面组件之前去做判断，满足某个条件的时候正常访问，不满足条件时，跳转到指定页面去。

经常被用来处理未登录用户访问页面时进行跳转

{
  //to:目标路由对象
  //from:当前真要离开的路由
  //next:函数，通过函数实现放行或者拒绝
  beforeEnter:(to,from,next)=>{


  }
}

new Vue({
  router: new Router({
    mode: 'history',
    routes: [
      {
        name: "login",
        path: "/login",
        component: () => import('./components/login')
      }, 
      {
        name: "test",
        path: "/test",
        component: () => import('./components/test')
      },{
        name: "home",
        path: '/home',
        component: () => import("./components/home"),
        beforeEnter:(to,from,next)=>{
          console.log(to)  //目标路由状态数据
          console.log(from) //当前页路由状态数据
          //允许访问
          //next()

          //拒绝:
          //方式1：
          next(false) //阻止进入，在页面中执行跳转会阻止，地址不变，如果浏览器直接输地址，会跳到首页
          
          //方式2：重定向，next函数传入一个重定向参数
          // next({
          //   path:'/login'
          // })
        }
      }
    ]
  }),
  render: h => h(App),
}).$mount('#app')