在vue中想要使用<router-link>实现整个页面的跳转,怎样设置<router-view></router-view>
时间: 2024-05-28 07:04:48 浏览: 145
Vue this.$router.push(参数)实现页面跳转操作
在Vue中使用<router-link>实现整个页面的跳转,需要首先在App.vue文件中添加<router-view>标签,作为所有路由组件的显示位置。然后,在需要实现跳转的地方,使用<router-link>标签来设置跳转的路径和参数。例如,在homepage页面中,可以使用如下代码实现跳转到list组件的界面:
```html
<div class="left">
<!-- 会被替换的界面位置 -->
<router-view></router-view>
</div>
<!-- 点击后,前面的router-view会被替换成list组件的界面 -->
<router-link class="series-a" exact-active-class="series" :to="{path:'/list',query:{seriesid:item.id}}">
<i class="iconfont"></i> {{item.special_column}}
</router-link>
```
这样,当点击<router-link>标签时,对应的路由组件会被渲染到<router-view>标签所在的位置。
阅读全文