Vue3——404、重定向以及导航守卫

Vue3跳转404页面

import NotFound from '@/view/NotFound/404.vue'

  {
    path: '/:pathMatch(.*)',
    //访问主页的时候 重定向到index页面
    redirect: '/404',
  },
    {
    path: '/404',
    name: '/404',
    component: NotFound
  },

路由重定向

  {
    path: '/',
    redirect: '/index',
    meta: {
      title: '首页',
      isShow: true,
    }
  },
    {
    path: '/list',
    name: '模型列表',
    component: Model,
    children: [{
      path: '/list',
      name: '首页',
      component: () => import('@/view/3DModel/List.vue'),
      meta: { title: '首页', isShow: true, },
    },
    {
      path: '/list/initmodel',
      name: '模型详情',
      component: () => import('@/view/3DModel/InitModel.vue'),
      meta: { title: '模型详情', keepAlive: true, isShow: true, },
    },
    {
      path: '/getmodel/management',
      name: 'management',
      component: () => import('@/view/3DModel/Management.vue'),
      meta: { title: '模型管理', isShow: true, },
    },
    {
      path: '/getmodel/category',
      name: '分类管理',
      component: () => import('@/view/3DModel/Category.vue'),
      meta: {
        title: '分类管理',
        isShow: true,
      }
    },
    ]
  },

创建导航守卫

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    const token = window.sessionStorage.getItem('token')
    if (!token) {
      next('/login')
    } else {
      next()
    }
  }
})