<router-view />我写在一级里面 路由跳了页面显示在一级路由下面
时间: 2023-12-26 20:06:44 浏览: 35
如果你在一级路由的组件中使用了`<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`容器中了。
相关问题
<router-view></router-view>和<router-view/>有区别吗
<router-view></router-view>和<router-view/>是Vue.js中用于路由视图的标签,它们的作用是用来显示匹配到的路由组件。
在Vue.js中,<router-view></router-view>是一对标签,用于包裹路由组件的显示位置。它会根据当前路由的路径匹配到对应的路由组件,并将其渲染在<router-view></router-view>所在的位置。
而<router-view/>是一个自闭合标签,它的作用与<router-view></router-view>是一样的,都是用来显示匹配到的路由组件。使用<router-view/>可以简化代码,不需要写闭合标签。
所以,<router-view></router-view>和<router-view/>在功能上是完全相同的,只是写法上稍有不同。你可以根据个人喜好选择使用哪种写法。
<router-view></router-view>里面如何在套一个<router-view></router-view>
在`<router-view></router-view>`里面嵌套另一个`<router-view></router-view>`是为了实现多级路由的嵌套。这样可以在父级路由的组件中再次加载子级路由的组件。
以下是一个示例代码,展示了如何在`<router-view></router-view>`中嵌套另一个`<router-view></router-view>`:
```html
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view></router-view>
<router-view name="A"></router-view>
<router-view name="B"></router-view>
</div>
</template>
```
在上述代码中,`<router-view></router-view>`用于渲染父级路由的组件,而`<router-view name="A"></router-view>`和`<router-view name="B"></router-view>`则用于渲染子级路由的组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)