vue3动态路由 定义了三级路由,路由跳转了,但页面还显示二级路由的
时间: 2023-07-28 15:14:00 浏览: 251
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
可能是因为你在定义动态路由时没有正确配置子路由。
如果你的三级路由是嵌套在二级路由中的,那么你需要在二级路由的组件中定义子路由,如下所示:
```javascript
const routes = [
{
path: '/second',
component: SecondComponent,
children: [
{
path: 'third/:id',
component: ThirdComponent
}
]
}
]
```
这样,当你访问 `/second/third/123` 时,会先加载 `SecondComponent`,然后在 `SecondComponent` 的模板中使用 `<router-view>` 显示 `ThirdComponent`。
如果你已经正确定义了子路由,但页面仍然显示二级路由的内容,那可能是因为你没有在 `SecondComponent` 的模板中使用 `<router-view>` 显示子路由的内容。请确保你在 `SecondComponent` 的模板中使用了 `<router-view>`,如下所示:
```html
<template>
<div>
<h1>Second Component</h1>
<router-view></router-view>
</div>
</template>
```
这样,当你访问 `/second/third/123` 时,会先加载 `SecondComponent`,然后在 `SecondComponent` 的模板中显示 `<router-view>`,从而加载 `ThirdComponent` 并显示在页面上。
阅读全文