帮我写一个vue2动态三级路由组件
时间: 2023-08-05 07:02:48 浏览: 46
好的,以下是一个简单的 Vue2 动态三级路由组件示例:
1. 在路由配置中定义动态路由:
```javascript
{
path: '/dynamic/:id',
name: 'dynamic',
component: () => import('@/views/Dynamic.vue'),
children: [
{
path: 'sub/:subId',
name: 'dynamic-sub',
component: () => import('@/views/DynamicSub.vue'),
children: [
{
path: 'sub-sub/:subSubId',
name: 'dynamic-sub-sub',
component: () => import('@/views/DynamicSubSub.vue')
}
]
}
]
}
```
在这个示例中,我们定义了一个 `/dynamic/:id` 的动态路由,并在其子路由中定义了两个动态子路由 `/sub/:subId` 和 `/sub-sub/:subSubId`,分别对应 `DynamicSub.vue` 和 `DynamicSubSub.vue` 组件。
2. 在组件中通过 `$route.params` 获取路由参数:
```javascript
<template>
<div>
<h2>Dynamic Component</h2>
<p>Dynamic id: {{ dynamicId }}</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Dynamic',
data() {
return {
dynamicId: null
}
},
mounted() {
this.dynamicId = this.$route.params.id
}
}
</script>
```
```javascript
<template>
<div>
<h2>Dynamic Sub Component</h2>
<p>Dynamic sub id: {{ dynamicSubId }}</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'DynamicSub',
data() {
return {
dynamicSubId: null
}
},
mounted() {
this.dynamicSubId = this.$route.params.subId
}
}
</script>
```
```javascript
<template>
<div>
<h2>Dynamic Sub-Sub Component</h2>
<p>Dynamic sub-sub id: {{ dynamicSubSubId }}</p>
</div>
</template>
<script>
export default {
name: 'DynamicSubSub',
data() {
return {
dynamicSubSubId: null
}
},
mounted() {
this.dynamicSubSubId = this.$route.params.subSubId
}
}
</script>
```
在这个示例中,我们在每个组件中都通过 `$route.params` 来获取对应的路由参数并显示在模板中。并且在 `Dynamic` 和 `DynamicSub` 组件中使用了 `<router-view></router-view>`,这样就可以在这两个组件中渲染它们的子路由组件了。
希望这个示例能够帮助你理解 Vue2 中动态三级路由组件的使用。