基于Vue的addRoutes实现权限控制

前言

从今年3月到现在入门前端也已经有两个月了，这两个月在自学的过程中遇到了许多问题也解决了其中一部分，但是现在才开始意识到把学习过程的问题整理到CSDN上。最近老师布置了基于Vue的权限控制，网上查阅了许多博客，例如“前端路上":这篇文章提到了Vue2.0以上使用的addRoutes增加动态路由的思路。然而我只是一个小白，尽管文章里贴出了源码，我也只能看的一知半解，所以根据文章中提供的思路自己写了一个小测试demo。

目录结构

准备工作

在路由配置文件里写上两个路由表，一个静态路由表（所有权限用户均能访问如“登录”、“404页”）和一个动态路由表，默认导出静态路由。

const router = new Router({ //静态路由，登录、404
  mode:'history',
  routes: [
    {
      path: '/login', //登录页
      name: 'login',
      component: (resolve) => require(['../components/login.vue'], resolve)
    },
    {
      path: '/404',  //404页