基于Vue的addRoutes实现权限控制

最新推荐文章于 2025-05-06 13:28:07 发布

置顶

糖果大大

最新推荐文章于 2025-05-06 13:28:07 发布

阅读量1.9w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：权限控制

本文链接：https://blog.csdn.net/qq_34160246/article/details/80322036

本文记录了使用Vue的addRoutes进行权限控制的实践过程，包括创建登录页、动态路由设置、登录后的页面重定向以及解决F5刷新后页面失效的问题。通过在根组件的created钩子中进行判断和动态添加路由，实现了刷新后动态路由依然有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

从今年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页
      name: 'err',
      component: (resolve) => require(['../components/err.vue'], resolve)
    },
  ]
});
export default router //默认静态路由