router push 子路由
时间: 2023-10-14 13:28:59 浏览: 46
Router push 子路由是指在 Vue.js 中使用 Vue Router 的 push() 方法来实现子路由切换。子路由是指在一个路由下面,再设置一些子路由,也就是路由的嵌套。通过 push() 方法来切换子路由时,会保留父路由不变,只改变当前的子路由。
例如,有一个父路由为 /home 的页面,下面有两个子路由 /home/news 和 /home/about。通过 push() 方法来切换子路由,可以实现在 /home 页面下切换到 /home/news 或 /home/about 页面。
示例代码如下:
```
<template>
<div>
<router-link to="/home/news">News</router-link>
<router-link to="/home/about">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {}
},
}
</script>
```
在上述代码中,通过 router-link 标签来实现页面跳转,并设置 to 属性为相应的子路由路径。在 router-view 标签中,会根据当前的子路由来渲染对应的组件。通过 push() 方法来切换子路由时,只需要调用 this.$router.push() 方法,并传入相应的子路由路径即可。
示例代码如下:
```
this.$router.push('/home/news');
this.$router.push('/home/about');
```