进行路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Category from '@/views/Category/index.vue'
import Home from '@/views/Home/index.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: Layout,
children:[
{
path:'',
component:Home
},
{
path:'category',
component:Category
}
]
},
{
path: '/login',
component: Login
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//进行懒加载
component: () => import('../views/AboutView.vue')
}
]
})
export default router
进行展示
<template>
<RouterView />
</template>