- 新建两个组件：
about1.vue
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"这是about1页面"
}
},
}
</script>
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data(){
return{
msg:"这是about2页面"
}
},
}
</script>
about2.vue
- 在router.js里的about配置子路由：
{
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(/* webpackChunkName: "about" */ './views/About.vue'),
children:[
{
path: 'about1',
component: About1
},
{
path: 'about2',
component: About2
}
]
},
- About.vue配置子路由：
<template>
<div class="about">
这是about组件
<div>
<router-link to="/about/about1">about1</router-link>
<router-link to="/about/about2">about2</router-link>
<router-view></router-view>
</div>
</div>
</template>
App.vue
<template>
<div id="root">
<router-link to="home">首页 \</router-link>
<router-link to="about">关于</router-link>
<router-view></router-view>
</div>
</template>