vue3动态路由通过url访问不生效

Question

动态添加路由后，router.push是可以路由到页面的，但是通过浏览器的url输入就不能路由到页面

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

router.beforeEach(async (to, from, next) => {
  const systemStore = useSystemStore()
  const userStore = useUserStore()
  systemStore.darkRefresh()

  const token = getToken()
  if (!token && to.path !== '/login') { // 如果 token 不存在且将要跳转的页面不是 /login，则直接跳转到 /login 页
    next('/login')
  } else if (token && to.path === '/login') { // 如果 token 存在且将要跳转的页面是 /login，则直接跳转到主页
    next('/')
  } else if (token) {
    try {
      await userStore.refreshUserInfo() // 刷新用户信息
      await systemStore.getAsyncRoutes() // 获取路由信息
      await generateRoutes(systemStore.getRoutes) // 添加动态路由
      next()
    } catch (error) {
      removeToken()
      userStore.$reset()
      next('/login')
    }
  } else { // 如果 token 不存在且将要跳转的页面是 /login，则直接跳转到登录页
    next()
  }
})

export const generateRoutes = (routes) => {
  if (!routes.length) {
    return
  }
  routes.forEach((item) => {
    const rts = {
      name: item.name,
      path: item.path,
      meta: item.meta,
      component: item.component
    }
    if (item.children && item.children.length) {
      generateRoutes(item.children)
    } else {
      rts.component = loadComponent(item.component)
    }
    router.addRoute('layout', rts)
  })
}

const loadView = import.meta.glob('@/views/**/*.vue')

const loadComponent = (url) => {
  return loadView['/src/views/' + url + '/index.vue']
}

Answer 1

【以下回答由 GPT 生成】

解决方案

在Vue 3中，要使动态添加的路由生效，需要进行以下几个步骤：

1. 确保你的Vue应用程序使用了Vue Router。如果没有安装，请通过以下命令安装Vue Router：

npm install vue-router@4

1. 在主路由文件中（通常是main.js），导入createRouter函数和createWebHistory函数：

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

1. 创建一个空的路由实例，并将其作为Vue Router的实例：

const router = createRouter({
  history: createWebHistory(),
  routes: []
})

1. 在路由实例中动态添加路由，可以使用router.addRoute方法。假设你有一个名为dynamicRoute的路由对象，可以这样添加路由：

router.addRoute(dynamicRoute)

1. 在Vue应用程序的根组件（通常是App.vue）中，使用router-view组件来显示动态添加的路由：

<router-view></router-view>

1. 确保你的Vue应用程序已经通过app.use(router)来使用Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

通过以上步骤，你应该能够使动态添加的路由在Vue 3中生效。当你通过router.push方法进行路由切换时，应该能够成功跳转到目标页面。同时，当你直接在浏览器的URL输入时，也能够正确路由到对应页面。

请注意，以上代码示例是一个基本的示例，你可能需要根据你的实际情况进行适当的调整。

如果以上解决方案没有解决你的问题，请将你的代码和错误信息提供给我，以便我能够更好地帮助你解决问题。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7747642
• 这篇博客也不错, 你可以看下vue-router实现页面状态与url同步

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