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

动态添加路由后，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']
}

【以下回答由 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输入时，也能够正确路由到对应页面。

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

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



【相关推荐】



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

以下是可能的解决方案：

  1. 确保路由配置正确：检查动态添加的路由是否正确配置在Vue Router中。确保每个页面都有对应的路由路径和组件。

  2. 使用router.addRoutes方法：如果您是在运行时动态添加路由，应该使用router.addRoutes方法来将动态添加的路由加入到路由器中。这可以确保路由器正确识别新添加的路由。

  3. 配置服务器：如果您正在使用服务器端路由（如Nginx或Apache），请确保将所使用的任何动态路由都配置到服务器中，以便服务器知道如何处理这些请求并正确将其导航到适当的页面。

  4. 检查路由路径：确保在浏览器地址栏中输入的路由路径与动态添加路由时使用的路径一致。请注意区分大小写和路由路径的斜杠是否正确。

这些是一些常见的解决方法，希望能帮助您解决路由无法通过浏览器地址栏导航的问题。

这可能是因为你在动态添加路由时没有正确配置路由。当你动态添加路由时，你需要确保在路由配置中包含你的新路由。
在Vue Router中，你可以使用addRoutes方法来动态添加路由。例如：

router.addRoutes([  
  {  
    path: '/new-route',  
    component: NewRouteComponent  
  }  
]);

启用html5历史模式才能通过url访问

可以截几个图，方便大家查看原因！例如：index.js 路由配置的代码，浏览器访问地址代码。

不要调用next()函数，而返回一个新的位置对象，检查你当前的位置是否已经匹配了一个路由记录，如果有，不需要添加新的路由，添加动态路由后，使用router.replace()函数来替换当前的位置，并显示新的路由

参考gpt：
结合自己分析给你如下建议：
你的路由模式可能是 history 模式，这种模式需要服务器端的支持，否则会出现 404 错误。你可以尝试将路由模式改为 hash 模式，或者在服务器端配置重定向规则。
你的路由配置可能有问题，比如路径参数的格式不正确，或者路由名称重复等。你可以检查一下你的路由配置是否符合 Vue Router 的文档。
你的动态添加路由的方法可能有问题，比如没有正确传递父路由的名称，或者没有正确引入组件等。你可以参考一下 Vue Router 的文档中关于动态添加路由的部分。

该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：

根据您提供的代码，动态添加路由后，通过 router.push可以成功路由到页面，但通过浏览器的 URL 输入却无法生效。这可能是由于 Vue Router 的历史模式与服务器配置不匹配导致的。

在 Vue Router 中，有两种模式可供选择：hash 模式和 history 模式。在 hash 模式下，URL 中会包含一个 # 符号，而 history 模式则使用真实的 URL，不带 # 符号。

如果您使用的是 history 模式，并且在服务器配置中没有正确处理这些 URL，就会导致直接在浏览器中输入 URL 时无法路由到页面。

要解决这个问题，您可以考虑以下几点：

  1. 确保服务器配置正确：对于 history 模式，您的服务器配置需要将所有的 URL 请求都重定向到您的主 index.html 文件。这样，当用户直接在浏览器中输入 URL 时，服务器会返回主页面，并由 Vue Router 处理路由。
    例如，在 Apache 服务器上，可以使用 .htaccess文件进行配置，确保所有 URL 请求都指向主页面：

    <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

    如果您使用其他类型的服务器，可以查阅相应服务器的文档，了解如何配置以支持 Vue Router 的 history 模式。

  2. 使用 hash 模式：如果您的服务器配置有限且无法调整，或者您只是想简化问题，可以考虑切换回 hash 模式。在 Vue Router 中，您可以通过修改 createWebHistory() 为 createWebHashHistory() 来切换到 hash 模式。

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

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

    使用 hash 模式后，您的 URL 将包含 # 符号，并且直接在浏览器中输入 URL 时应该可以正常路由到页面。

请注意，使用 hash 模式可能会对 URL 的美观性产生一些影响，因为每个路由都会包含 # 符号。如果您的服务器配置允许，强烈建议使用 history 模式，并正确配置服务器以支持该模式。

希望这些解决方案能帮助您解决问题。

如果以上回答对您有所帮助，点击一下采纳该答案～谢谢