一、在views文件夹中创建页面组件
二、在router文件夹中的index.js配置路由
1.先确定一级路由和二级路由,最好弄一个表格,把路由设计出来,再根据表格来配置路由,类似这样
2.index.js内容可以这样写
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{ path: '/login', component: () => import('@/views/login/LoginPage.vue') }, //登录注册页面
{
path: '/',
component: () => import('@/views/login/LoginPage.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/UserAvatar.vue')
}
]
}
]
})
export default router
3.使用路由这么写(在你需要用路由的文件)注意大小写
import import { useRouter } from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
router.push('/')