import { createRouter, createWebHistory } from ‘vue-router‘
const routes = [
{
path: ‘/‘,
name: ‘Home‘,
component: ()=>import(‘../views/Home.vue‘)
},
{
path: ‘/about‘,
name: ‘About‘,
component: ()=>import(‘../views/About.vue‘),
children:[{//定义About路由下的子路由
path:‘user‘,
component:()=>import(‘../views/AboutUser.vue‘),
},{
path:‘role‘,
component:()=>import(‘../views/AboutRole.vue‘),
}]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
About.vue文件：
<template>
<div >
这是About页面
<br>
<router-link to="/about/user">AboutUser</router-link>//跳向AboutUser组件的路由链接
<br>
<router-link to="/about/role">AboutRole</router-link>//跳向AboutRole组件的路由链接
<br>
<router-view></router-view>//路由组件的显示位置
</div>
</template>
<script>
export default {
components: {
}
}
</script>
