<router-view />我写在一级里面 路由跳了页面显示在一级路由下面
时间: 2023-12-26 15:06:44 浏览: 107
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
如果你在一级路由的组件中使用了`<router-view />`,但是二级路由的组件显示在了一级路由组件的下面,可能是因为你在一级路由组件的模板中没有正确地放置`<router-view />`。
在Vue Router中,`<router-view />`是一个用来显示匹配到的组件的占位符。如果你在一级路由组件的模板中仅仅是放置了`<router-view />`,那么匹配到的二级路由组件会显示在一级路由组件的下面,这是因为`<router-view />`会被渲染成一个普通的HTML元素,并被插入到一级路由组件的DOM结构中。
为了解决这个问题,你需要在一级路由组件的模板中,将`<router-view />`放置到你希望显示二级路由组件的位置。比如,如果你希望在一级路由组件的某个div容器中显示二级路由组件,那么你可以这样写:
```html
<template>
<div>
<h1>一级路由</h1>
<div class="content">
<router-view />
</div>
</div>
</template>
```
这样,匹配到的二级路由组件就会显示在一级路由组件的`.content`容器中了。
阅读全文