vue-router addRoute 添加动态路由，第一次跳转正常，刷新后变404页或空白页？

Question

1、问题

加入动态路由权限模块后，选择新页面后，在动态添加的页面中进行页面的刷新后，页面就默认跳转到404页面了。后来将404页面进行最后的动态路由的添加，依然会进行空白页的跳转。

2、代码部分

// router/index.ts 代码部分

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [    //静态路由
  {
    path:'/',
    name: 'admin',
    component: () => import('@/layout/admin.vue'),

  {
    path: '/login', 
    name: 'Login', 
    component: () => import('../pages/login/login.vue'),
    meta:{
      title: '登录'
    }
  },
];


const asyncRoutes = [    //  动态路由
  {
    path: "/",
    name: "Home",
    component: () => import('../pages/home/home.vue'),
    meta:{
      title: '首页'
    }
  },
  {
    path: "/goods/list",
    name: "Goods/list",
    component: () => import('../pages/goods/list.vue'),
    meta:{
      title: '商品管理'
    }
  },
  {
    path: "/category/list",
    name: "Category/list",
    component: () => import('../pages/category/list.vue'),
    meta:{
      title: '分类管理'
    }
  },
]

const NotFound = {
  path: '/:pathMatch(.*)*',
  name: 'NotFound', 
  component: () => import('../pages/other/404.vue'),
  meta:{
    title: '404找不到页面'
  }
}

 
export const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

// export default router

//  动态添加路由
export const addRoutes = (menus) => {
  // let hasNewRoutes:Boolean = false    // 是否有新路由
  const findAndAddRoutesByMenus = (arr) => {
    arr.forEach(e => {
      let item = asyncRoutes.find(o=>o.path == e.frontpath)
      if(item && !router.hasRoute(item.path)){
        router.addRoute("admin",item)
        // hasNewRoutes = true    //有新路由添加，变为false
      }
      if(e.child && e.child.length > 0){
        findAndAddRoutesByMenus(e.child)
      }
    });
  }
  findAndAddRoutesByMenus(menus)
  router.addRoute(NotFound)

  // return hasNewRoutes  // 返回跳转获取的判断值
}

// 路由前置守卫部分

import { storeData } from '@/store'  //pinia
router.beforeEach((to, from, next) => {
  // pinia的数据的调用
  // counter.userinfo 该数据为持久化数据存储在localStorage中，
  const counter = storeData()
  const token = getToken()  // 获取用户登录的 token
  let hasNewRoutes:Boolean = false  //定义默认值
  if(token){    
    hasNewRoutes = addRoutes(counter.userinfo?.menus)  // 添加路由 会获取返回值
  }
  // hasNewRoutes ? next(to.fullPath) : next()  //根据返回值  防止页面进行死循环
  next()
})

注释部分概述：

该代码是根据网上的一个教程，注释部分为教程中的写法，但是我的代码也是根据他教程中的写法，不行，依旧会进行死循环，注释掉后就会第一次加载页面可以，刷新页面就会空白页。

代码仓库：

可以查看2023/1/3-1的提交的代码分支~

该问题应困扰好几天了，网上试过个各种方法了都不好用，实在是没有头绪了😟，有那位好心的大哥可以帮忙看看一下，真的是万分感谢😁😁！！

Answer 1

需要改服务器配置，一般是用nginx

location / {
  try_files $uri $uri/ /index.html;
}

参考：https://router.vuejs.org/guid...