vue3后台管理系统侧边导航栏路由的配置方式(两种)

我想要的588

已于 2023-12-05 14:53:20 修改

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端项目路由router搭建文章标签：前端 javascript vue.js

于 2023-09-19 20:18:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_68950219/article/details/133040955

文章介绍了在Vue应用中使用vue-router进行路由配置，包括两种方式：一是通过单个文件管理路由和权限，二是采用动态渲染的文件结构。同时涉及了登录状态下的路由导航和nprogress进度条的使用以及路由鉴权的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种(router新建一个文件夹)

index.js（这里个人中心（tabs)没有路由，里面有子路由）

// 引入路由
import { createRouter, createWebHistory } from 'vue-router'
// 引入仓库
import { useUserStore } from '@/stores'
// 创建路由
const router = createRouter({
  // 路由模式、基础路径
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则
  routes: [
    { path: '/login', component: () => import('@/views/login/LoginPage.vue') }, // 登录页，一级路由
    {
      path: '/', //登录成功默认跳转的页面，一级路由
      component: () => import('@/views/layout/LayoutContainer.vue'),
      redirect: '/article/manage', //路由重定向
      // 子路由
      children: [
        {
          // 文章管理页面路由
          path: '/article/manage',
          component: () => import('@/views/article/ArticleManage.vue')
        },
        // 文章分类页面路由
        {
          path: '/article/channel',
          component: () => import('@/views/article/ArticleChannel.vue')
        },
        // 个人中心基本资料路由
        {
          path: '/user/profile',
          component: () => import('@/views/user/UserProfile.vue')
        },
        // 个人中心更换头像路由
        {
          path: '/user/avatar',
          component: () => import('@/views/user/UserAvatar.vue')
        },
        // 个人中心重置密码路由
        {
          path: '/user/password',
          component: () => import('@/views/user/UserPassword.vue')
        }
      ]
    }
  ]
})
// 登录访问拦截
router.beforeEach((to) => {
  // 如果没有token，且返回的是非登录页，拦截到登录。其它情况正常放行
  const useStore = useUserStore()
  if (!useSto

最低0.47元/天解锁文章