vue----webpack模板----全局路由守卫

路由守卫

通过路由的变化，对权限做一些验证

全局路由守卫

beforeEach:全局守卫。（针对所有的路由）

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

router.beforeEach((to,from,next)=>{
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该函数，next()如果不设置参数，则执行的是to对应的path/name,如果设置了参数，则执行设置的路由
}

用途：

验证用户的登录状态

eg:用途举例：

列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，判断：如果“未登录状态”，则跳转到登录页面Login，如果已登录，则跳转到相应的路由
 
next()如果不设置参数，则执行的是to对应的path/name,如果设置了参数，则执行设置的路由

 

 

在index.js中进行设置全局路由

 

const router =  new Router({//将路由的实例赋给router
  routes: [
   {
     path:"/",
     redirect:"/home"
   },
   {
    path:"/home",
    name:"home",
    component:home
  },
  {
    path:"/login",
    name:"login",
    component:login
  },
  {
    // path:"/goods/:name/:price",
    path:"/goods",
    name:"goods",
    component:goods,
    children:[
      {
        // 注意
        path:"details/:name/:price",
        name:"details",
        component:details
      }
    ]
 
  },
  {
    path:"/my",
    name:"my",
    component:my
  },
  {
    path:"/find",
    name:"find",
    
    component:find
  },
  {
    path:"**",
    component:home
  },
  ]
})
 
//进入每一个路由时，都要有一个守卫
router.beforeEach((to,from,next)=>{
  let flag = false;
  //获取所有需要验证登录状态的路由,数组中为路由的name/path
  let routers = ["find","my","goods"];

  //to.name 为所要到达的路由的名称
  if(routers.indexOf(to.name)!=-1){//路由为要验证的路由
    if(!flag){//为没有登录状态
      router.push("/login");//router为路由的方法，router.push()实现路由的跳转
    }else{
      next()
    }
  }else{
    next();
  }
 
})
 
//将路由导出
export default router;

 

 

/*

全局守卫：给每一个路由都加一个守卫，针对所有的路由

*/