Subscribe on changes!

vite+vue3动态添加路由,提示找不到路径

avatar
Oct 7th 2022

Vue version

3.2.38

Link to minimal reproduction

https://sfc.vuejs.org/#eNqlVttq3EYYfpVhKZE27ErkdoPbuBBwoPQioemF18RjaXYlI41UzciHLgtJaZKmJE4ITkpDSjC0YJrWTig0bZ0lL2Ptum+Rfw46rTe2IXuxaEb/8fu/+UaDxnwcW2spaXQafhhHCUcD5CQEc3I1SjlJWnr1NVlZwMxb8BmPkk00RL0kCpEBnu1EGhpdWgQICWO4TworTHnbJczv0zY4GBcL0y/jJOonYK0Nab6u2JSbdvFkOTUTkZGmRbpLNo59G6fcEzZd6kSUcRRGbhoQhuaQ8rJCwrHVD6IV07BZ4thrPlln9nn7vMDDaF5Eto2u+5yg8fb++P6tw9G7yfbu5N6/470fJ8++PxYFZXdH4yevDg+2xk/vHh78PfnrYHLwItt/m93+Lfv12eE/v493d7JffiorUsBBQVXAzUGXIuQpnDsz0TerqQldsz6fv3b5xldXv2i2hK8MyzpoUSwQkvHEL8bc6yDDDqK+Tw1pKn4UhwS2p3adCHJQQnknB26xipK0tq9Ql2xchw2J2FLhLArrwFSkVQfxJAUuqJdDbQTY6sLg6fR0eBOa+kA+FcDzAzchkE23LXeL7vWqBCHvtHhxSgVeFJKT8leQFKbtAEZ1LEeOC/d5ICyzF/+Nn/9x+G5nfGvfqEIzhRRClVxqf6lLh03Jbtj6/+bjbPQ4e/sEqHb0Zn+y/TqnmLsJRfmOohYwTVEODsGnChllJYqFl4tLEFDzJ2FWiGPTBP6HLeSLxpuFF5IeVpwyT9H1LIw5aYQz5lejbjk5UY8lHgvPEnn5LqX+Nym5IU5/zQRgqlRoymbUOTKXL+kaPxnIEIXdUBS5rE5V/pvR5nKlzdkhyj5n0EA6iA7yMyKnnz/mrnLa4sHvITkVK4cMnTunYuQbVkBon3vNEj8xrkU5xKXSqvCfq9OkHj1PKwvSRSSEpwmVUWE9zGk4vv/d0WiU3d7NXt/M7j2YjPYUGbO9H7IHL7tUEctaIb0oIZex45mYbVIHmTxqSeluIUo2eMmz4nqwGMcwKJXdjZwU9J5bEj+onkdKCvV6bg6l0GrPp8RFn8Epe7SVPXw12duZPLqjRNlAIEpVJxlXAAu7chIQQytigaIoTVeQIyAXEhjhG0QODq6BQMPVZ/UJvwIwmsY8EDFK/Pa3mPsRhCvinZJOJwSlynNW8XCBXEUxQ0QCRkpHGAXcQtD25OX+0dab7OHTXBQqR0Gc+wFyMcfgP4fwOvbhjoRr1BzwzZh0LrQQ86L1DrpQME961qki/AFHmjalXAjmVFRCi5eeO3Zd6SWtajG1kuXL7M7P4z8P6jVPx6hIw8cJzwekZ0p8jl8cZ8x+wr1RFy9jASyng5/twtCKUVmVKerDk5QaIMuyxJFLSBxgB+KqC7p+0muc0n61T4XSYSYtIUp5QYEyZM93tTIAL3NlKDQB9+BfSoJS5qnjX8TVIcmG/O6DQ47TIP+QarT0J2wbqGitsojCR60M1NUvWLcBaKqiuw2YhVh3Gx7nMevYNus5YkCrzIqSvg1PVpJS7ofEIixsryTROoNSVyFK3mBj+B5eOuEF

Steps to reproduce

`import { createRouter, createWebHashHistory } from 'vue-router' import { message } from 'ant-design-vue'; import Nprogress from 'nprogress'; import 'nprogress/nprogress.css'; import { menu } from '@/api/auth';

const modules = import.meta.glob('/src/views//.vue'); // Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块

const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), routes: [ { path: '/login', name: 'login', component: modules['/src/views/login/IndexView.vue'], meta: { login: true } }, // { // component: modules['/src/views/layout/IndexView.vue'], // children: [ // { // path: '/', // component: modules['/src/views/home/IndexView.vue'], // name: 'home-list', // meta: { title: '基本信息' }, // }, // ], // }, ] });

// 递归引入路由 const dynamicRouter = routers => { const list = []; routers.map((item, index) => { list.push({ component: modules['/src/views/layout/IndexView.vue'], children: [ { path: item.path, name: item.unique_auth, // component: () => import(@/views/${item.component}.vue), component: modules[/src/views/${item.component}.vue], meta: { title: item.name } } ], }); if (item.children && item.children.length) { list[index].children.children = dynamicRouter(item.children); } }); return list; };

// 挂载全局前置路由守卫 router.beforeEach(async (to, from, next) => { Nprogress.start(); document.title = to.meta.title === undefined ? '后台管理系统' : to.meta.title; if (to.name == 'login') { next(); return; } if (localStorage.getItem('Authori-zation')) { if (to.name == 'login') { next('/'); Nprogress.done(); } else { // 从后端获取路由 // const { data } = await menu({type:1, show: 1}); // dynamicRouter(data.menu).map(item => { // router.addRoute(item); // });

 // 写死路由
  router.addRoute({
    component: modules['/src/views/layout/IndexView.vue'],
    children: [
      {
        path: '/',
        component: modules['/src/views/home/IndexView.vue'],
        name: 'Home',
        meta: { title: '基本信息' },
      },
    ],
  });
  // next({ ...to, replace: true });
}

} else { next({ name: 'login' }); Nprogress.done(); } });

// 挂在全局后置路由 router.afterEach(() => { Nprogress.done(); });

export default router `

What is expected?

动态添加路由

What is actually happening?

[Vue Router warn]: No match found for location with path "/". [Vue Router warn]: Detected an infinite redirection in a navigation guard when going from "/" to "/". Aborting to avoid a Stack Overflow. This will break in production if not fixed. [Vue Router warn]: Unexpected error when starting the router: Error: Infinite redirect in navigation guard.

System Info

No response

Any additional comments?

在路由守卫里当动态添加路由,无论是从后端获取路由参数,还是写死,总是添加不了,提示不存在路径,求教解决办法,应该怎么写

avatar
Oct 7th 2022

The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions.

For usage questions, please use the following resources: