vue-router 4.0版本addRoutes方法不生效问题解决

问题描述

• 不知道从 vue-router 的 3.x 版本后就不再支持 addRoutes() 方法了，本来对 vue 用的就不是很6，这样一搞我更懵得不行了。
• 简单来描述一下我所遇到的问题，在全局导航守卫里添加了动态路由后，使用 router.push() 方法跳转到新的位置（组件）没问题，但是直接在地址栏输入路径，甚至是在原路径上刷新，都无法完成跳转，浏览器这么说:

  [Vue Router warn]: No match found for location with path "/xxx"
  

上代码，router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import axios from 'axios'

const routes: Array<RouteRecordRaw> = [];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach(async (to, from, next) => {
  var requestUrl = "http://127.0.0.1:8000/api/system/menus/";
  await axios
    .get(requestUrl)
    .then(res => {
        for(var i =0; i<res.data.length; i++) {
        	var te = {
        		path: res.data[i].url,
				name: res.data[i].name,
              	component: () => import('@/views/Sys/Jingchuan.vue')
            }; 
        }
        
    .then(res => {
      
    })
    .catch((res) => {
      console.log("except");
    });


  if (to.path === '/login') {
    // 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
    if(token) {
      next({ path: '/' })
    } else {
      next()
    }
  } else {
    if (!token) {
      // 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
      next({ path: '/login' })
    } else {
      // 加载动态菜单和路由
      for(var i=0; i<dd.length; i++) {
        router.addRoute('Home', dd[i]);
        router.options.routes.push(dd[i]);
        //router.push(dd[i].path)
        console.log(router);
      }
      console.log(router.getRoutes());
      store.commit('menuRouteLoaded', true)
  
    next()
    }
    
  }

})