vue3刷新页面报错No match found for location with path

不同页面间切换没有问题,但只要刷新页面或者通过路径访问现在的页面,就会白页,控制台报错No match found for location with path
router

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

const routes = [
  {
    path: '/',
    name: '首页',
    component: () => import('../layout'),
    redirect:'/index',
    children: [
      {
        path: '/index',
        name: '首页',
        component: () => import('../views/index/index')
      },
      {
        path: '/userCenter',
        name: '个人中心',
        component: () => import('../views/userCenter/index')
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue')
  }
]

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

export default router

路由守卫

import router from '@/router'
import store from '@/store'

router.beforeEach((to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN
    if (token) {
        let hasRouter = store.state.hasRoutes
        let menuList = store.getters.GET_MENU
        if (!hasRouter) {
            bindRoute(menuList)
            store.commit('SET_ROUTES_STATE', true)
        }
        next()
    } else {
        if (whiteList.includes(to.path)) {
            next()
        } else {
            next('/login')
        }
    }
})

//动态绑定路由
const bindRoute = (menuList) => {
    let routes = router.options.routes
    menuList.forEach(menu => {
        if (menu.children) {
            menu.children.forEach(m => {
                let route = menuToRoutes(m, menu.name)
                if (route) {
                    routes[0].children.push(route)
                }
            })
        }
    })
    //加到路由里
    routes.forEach(route => {
        router.addRoute(route)
    })
}

//菜单对象转路由对象
const menuToRoutes = (menu, parentName) => {
    if (!menu.component) {
        return null
    } else {
        let route = {
            name: menu.name,
            path: menu.path,
            meta: {
                parentName: parentName
            }
        }
        route.component = () => import('@/views/' + menu.component + '.vue')
        return route
    }
}

【相关推荐】



  • 你看下这篇博客吧, 应该有用👉 :解决Vue3.0 页面刷新 [Vue Router warn]: No match found for location with path 警告
  • 除此之外, 这篇博客: vue制作圆形进度条中的 path元素 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    path元素是用来定义形状的通用元素,所有的基本形状都可以用path元素来创建

    这里用了path的d属性来创建圆形进度条
    d属性:该属性定义了一个路径,其中包含了一系列路径描述.

    这些路径由下面这些指令组成:


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^