admin管理员组

文章数量:1633739

第一种(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

本文标签： 管理系统两种侧边路由后台

版权声明：本文标题：vue3后台管理系统侧边导航栏路由的配置方式(两种) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1729175116a1188616.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。