app.vue
<template>
<router-view></router-view>
</template>
main/index.vue
<template>
<div class="nav">
<router-link to="/carousel">轮播图</router-link>
<router-link to="/about">Go to About</router-link>
</div>
<router-view></router-view>
</template>
<style scoped>
.nav {
display: flex;
justify-content: space-around;
font-size: 20px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
a {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.router-link-active {
color: #fe5000;
}
</style>
router/index.js
'use strict'
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '',
component: () => import('../views/main/Index.vue'),
redirect: '/carousel',
children: [
{
path: '/carousel',
name: 'carousel',
component: () => import('../views/carousel/Index.vue'),
meta: {
title: '轮播图'
}
},
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
createApp(App)
.use(router)
.mount('#app')
