路由无法正常跳转

Question

老师:
过年好，我核对了路由表里的信息没问题，但输入路由地址却无法跳转，麻烦您帮忙看看，谢谢！

import { createRouter, createWebHistory, RouteRecordRaw } from “vue-router”;
import layout from ‘@/layout/index.vue’;

/**

• 私有路由表
  /
  const privateRoutes = [
  {
  path:’/user’,
  component:layout,
  redirect:’/user/manage’,
  meta:{
  title:‘user’,
  icon:‘personnel’
  },
  children:[
  {
  path:’/user/manage’,
  name:‘userManage’,
  component: () => import(’@/views/user-manage/index.vue’),
  meta: {
  title:‘userManage’,
  icon:‘personnel-manage’
  }
  },
  {
  path:’/user/role’,
  name:‘userRole’,
  component: () => import(’@/views/role-list/index.vue’),
  meta: {
  title:‘roleList’,
  icon:‘role’
  }
  },
  {
  path:’/user/permission’,
  name:‘userPermission’,
  component: () => import(’@/views/permission-list/index.vue’),
  meta: {
  title:‘permissionList’,
  icon:‘permission’
  }
  },
  // {
  // path:’/user/info/:id’,
  // name:‘userInfo’,
  // component: () => import(’@/views/user-info/index.vue’),
  // meta: {
  // title:‘userInfo’
  // }
  // },
  {
  path:’/user/import’,
  name:‘import’,
  component: () => import(’@/views/import/index.vue’),
  meta: {
  title:‘excelImport’
  }
  },
  ]
  },
  {
  path: ‘/article’,
  component: layout,
  redirect: ‘/article/ranking’,
  name: ‘articleRanking’,
  meta: { title: ‘article’, icon: ‘article’ },
  children: [
  {
  path: ‘/article/ranking’,
  name:‘acticleRanking’,
  component: () => import(’@/views/article-ranking/index.vue’),
  meta: {
  title: ‘articleRanking’,
  icon: ‘article-ranking’
  }
  },
  {
  path: ‘/article/:id’,
  name:‘articleDetail’,
  component: () => import(’@/views/article-detail/index.vue’),
  meta: {
  title: ‘articleDetail’
  }
  },
  {
  path: ‘/article/create’,
  name:‘acticleCreate’,
  component: () => import(’@/views/article-create/index.vue’),
  meta: {
  title: ‘articleCreate’,
  icon: ‘article-create’
  }
  },
  {
  path: ‘/article/editor/:id’,
  name:‘articleEditor’,
  component: () => import(’@/views/article-detail/index.vue’),
  meta: {
  title: ‘articleDetail’
  }
  },
  ]
  },
  ]
  /*
• 公开路由表
  */
  const publicRoutes: Array = [
  {
  path:’/login’,
  name:‘Login’,
  component:() => import(’@/views/login/index.vue’)
  },{
  path:’/’,
  redirect:’/profile’,
  component: layout,
  children:[
  // 个人中心
  {
  path:’/profile’,
  name:‘profile’,
  component: () => import(’@/views/profile/index.vue’),
  meta: {
  title:‘profile’,
  icon:‘el-icon-user’
  }
  },
  // 404
  {
  path:’/404’,
  name:‘404’,
  component: () => import(’@/views/error-page/404.vue’)
  },
  // 401
  {
  path:’/401’,
  name:‘401’,
  component: () => import(’@/views/error-page/401.vue’)
  },
  ]
  }
  ];

const router = createRouter({
history: createWebHistory(),
routes:[…publicRoutes,…privateRoutes],
});

export default router;

Answer 1

Sunday 2022-02-02 08:37:46

你好，新年快乐

我查看你的贴图有一个对应的错误： invalid navigation guard

这个错误应该是导航守卫中的错误，你可以查看下这个帖子，看看能不能解决你的问题：

https://stackoverflow.com/questions/62223195/vue-router-uncaught-in-promise-error-redirected-from-login-to-via-a