[Question] 关于动态菜单 addRoutes 浏览器刷新无效

[InfernalAzazel]

🧐 问题描述 Problem Description

关于动态菜单 addRoutes 浏览器刷新无效

💻 示例代码 Sample code

login.vue

const handleFinish = () => {
  message.loading({ content: 'Loading...', key, duration: 8 });
  axios
    .post('/api/v1/login', formState)
    .then((res: AxiosResponse) => {
      // console.log(res.data)
      message.success({ content: 'success!', key, duration: 2 });
      let access_token = res.data.access_token;
      store.commit("setAccessToken", access_token);
     // 把路由信息放进状态
      store.commit("setRoute", {
        path: '/',
        name: 'layout',
        meta: { title: 'layout', noCache: false },
        redirect: '/vulnerability',
        component: () => import('../../layout/index.vue'),
        children: [
          {
            path: '/vulnerability',
            name: 'vulnerability',
            meta: { title: '漏洞数据', icon: 'database-outlined' },
            component: () => import('../../views/vulnerability/index.vue'),
          },
          {
            path: '/userinfo',
            name: 'userinfo',
            meta: { title: '个人中心', icon: 'UserOutlined' },
            component: () => import('../../views/userinfo/index.vue'),
          },
        ]
      });
      router.push({ path: "/" });
    });
};

router.ts

import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw} from 'vue-router'
import store from "./store";
import('./views/userinfo/index.vue')

const routes: RouteRecordRaw[] = [
    { 
      path: '/',
      name: 'layout',
      meta: { title: 'layout' },
      redirect: '/vulnerability',
      component: () => import('./layout/index.vue'),
      children: [
        {
          path: '/vulnerability',
          name: 'vulnerability',
          meta: { title: '漏洞数据', icon: 'database-outlined' },
          component: () => import('./views/vulnerability/index.vue'),
        },
        // {
        //   path: '/userinfo',
        //   name: '个人中心',
        //   meta: { title: '个人中心', icon: 'UserOutlined' },
        //   component: () => import('./views/userinfo/index.vue'),
        // },
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./views/login/index.vue'),
    }
  ]
  
const router = createRouter({
    history: createWebHashHistory(),
    routes,
  })

const whiteList = ["/login"];

router.beforeEach((to, from, next) => {
      let access_token = store.getters.access_token;
      if (access_token) {
          if (to.path === "/login") {
              // 如果登录过，直接跳转到首页
              next({ path: "/" });
          }else {
              // 这样写有问题
              if(store.getters.route){
                  router.addRoute('/',store.getters.route)
                  next({ ...to, replace: true })
              }else {
                  console.log("-----/////////////////////////")
                  next();
              }

          }
      } else {
          if (whiteList.indexOf(to.path) !== -1) {
              next();
          } else {
              next({ path: `/login` });
          }
      }
  });
export default router

🚑 其他信息 Other information

[sendya]

看不懂你要干什么，如果描述不清楚，可以提供完整的可运行复现

另外 路由相关问题请找 vue-router 文档，本项目只负责处理 layout 相关问题

[InfernalAzazel]

那关闭吧，vue-router 的问题。