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://www.elefans.com/dongtai/1729175116a1188616.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论