Vue 嵌套路由
嵌套路由,也叫做多级路由
routes配置项里配好children属性
然后子路由组件中使用router-link和router-view标签即可
案例
routes.js
import VueRouter from 'vue-router'
import Island from '../pages/Island'
import Polaris from '../pages/Polaris'
import IslandMessage from '../pages/IslandMessage'
import IslandPhone from '../pages/IslandPhone'
import PolarisMessage from '../pages/PolarisMessage'
import PolarisPhone from '../pages/PolarisPhone'
export default new VueRouter({
routes: [
{
component: Island,
path: "/Island",
children: [
{
path: 'IslandMessage',
component: IslandMessage
},
{
path: 'IslandPhone',
component: IslandPhone
},
]
},
{
component: Polaris,
path: "/Polaris",
children: [
{
path: 'PolarisMessage',
component: PolarisMessage
},
{
path: 'PolarisPhone',
component: PolarisPhone
}
]
},
]
})
app.vue
<template>
<div id="app">
<div class="nav">
<router-link class="nav" to="/Island" active-class="active-nav">
Island
</router-link>
<router-link class="nav" to="/Polaris" active-class="active-nav">
Polaris
</router-link>
</div>
<div class="con">
<router-view />
</div>
</div>
</template>
Island.vue
<template>
<div>
<h1>message by Island</h1>
<router-link to="/Island/IslandMessage">展示Island的message</router-link>
<router-link to="/Island/IslandPhone">展示Island的message</router-link>
<div>
<router-view />
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
h1 {
color: salmon;
}
</style>