vue3+vite+vue-router4.x实现动态添加路由

原创

已于 2023-05-15 09:59:59 修改

· 6.1k 阅读

17 ·

版权

文章标签：

#vue-router4.x #vue3 #动态添加路由

于 2023-05-15 09:44:15 首次发布

实现内容：

1.根据后台返回的菜单，前端实现动态添加路由；

2.解决刷新页面时，路由消失/页面空白的问题；

第一步：请求后台，返回菜单数据【内容如下】

// 后台返回的菜单数据
this.menuList = [
        { id: 1, path: '/home', name: '首页', icon: true, children: [], component: '/home/home' },
        { id: 12, path: '/pinia', name: 'pinia的使用', icon: true, children: [], component: '/pinia/pinia' },
        { id: 2, path: '/menu', name: '递归菜单页面', icon: true, children: [], component: '/recursion-menu/recursion-menu' },
        { id: 3, path: '/test', name: '测试', icon: true, children: [], component: '/test/test' },
        {
          id: 10,
          path: '/permisson',
          name: '权限管理',
          icon: true,