vue-router关于路由管理的四个场景及实现方案

woc！我进了我不该进的地方😍

这里有一个问题，就是如果我没有登录，我直接将路由切换到主页，那么我是不是就是进了我不该进的地方！ ，这个时候就到路由守卫也叫做路由导航出马了~

全局前置守卫会拦下你的去路🪨

当任意路由发生切换的时候都会触发全局守卫，而全局守卫有三个钩子函数

• beforeEach：全局前置守卫，在路由切换前触发
• beforeResolve：全局解析守卫，同样在路由切换前触发
• afterEach：全局后置守卫，在路由切换完成后触发

这三个钩子的具有to与from两个相同参数，to为即将要切换的路由，from为当前要离开的路由，而beforeEach与beforeResolve额外包括了next参数，当执行next时会放行当前的路由切换行为，如果我们为next传入参数，那么就会切换到参数所指定的路由，下面我们使用全局前置守卫作为示范

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
        next()
    } else {
        let token = getStorage('token')
        if (!token) {
            next('/login')
        } else {
            next()
        }
    }
})

在这里我们通过beforeEach实现了，当用户没有登录状态访问非登录页面时，路由守卫不会放行，强制回到login路由上，但是当用户想要访问不需要权限的页面该怎么办呢，这个时候就需要路由元信息出马了

带上邀请函可以让你畅通无阻💌

在上面我们通过全局前置守卫针对用户状态进行判断，来阻止路由切换到它不应该去的地方，那么如果有一些页面可以无权限访问，那么这个时候我们就不能挨个进行判断了，ifelse又或者是switch判断要切换的路由，这样做起来太冗余，所以我们可以采用邀请函的方式，而这份邀请函正是我们的元信息meta，下面我们来学习如何使用router的meta元信息结合路由前置守卫来让无需权限访问的页面同行。

我基于上面的路由添加了meta属性，相当于我给这个路由发了份邀请函，这份邀请函里包裹了布尔值，在这个基础上，我们就可以再通过路由前置守卫过滤掉一些不需要权限就可以访问的页面了

router.beforeEach((to, from) => {
  let token = getStorage('token')
  if (to.meta.requiresAuth && !token) {
     next('/login')
  }else {
     next()
  }
})

比如说这里的路由前置守卫，当to.meta.requiresAuth为ture为false，说明页面无需登录权限，直接切换路由。

我想进一个地方但是没有这个地方！🈚

当用户想去一个页面的时候，发现这个页面怎么是空白的！很正常，因为你没有对未定义路由这种情况做处理，所以当用户切换到一个没有定义的路由的情况下，我们需要给他重定向到我们定义的404页面

const routes = [
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('@/views/NotFound')
  },
  {
    path: '*',
    redirect: '/404'
  }
];

实现起来也很简单，在定义好404的路由后，在最后的一项配置一个通配符*，当用户走没有定义的路由后就会走这个通配符的路由，切换到404页面，对了404页面是没有登录权限也可以访问的，所以记得加个权限进去~

使用动态路由，再也不怕走错地方了😄

关于动态路由，这让我们想到了计算机网络中的动态路由协议，无需管理员手动添加路由，相对的，我们在vue-router中使用动态路由，我们也无需关心路由的配置问题🙈

const backRouter = [] // 我是后端返回的路由列表
for(item of backRouter) {
    router.addRoute(item)
}

调用addRoute将我们的路由列表配置项动态添加进去，当然如果你需要更加定制化的路由，你完全可以对后端返回的数据稍加处理，除了addRoute之外，我们也可以使用removeRoute动态地删除路由，参数是路由项的name