vue子路由跳回父路由页面不刷新
时间: 2023-11-11 17:02:56 浏览: 237
解决vue 路由变化页面数据不刷新的问题
在Vue中,当子路由跳转回父路由页面时,默认情况下是不会刷新父路由页面的。这是因为Vue使用了路由的懒加载机制,只有在首次加载路由时才会渲染对应的组件,之后的跳转只是切换组件的显示与隐藏,并不重新加载。
如果你希望在子路由跳转回父路由页面时进行刷新,可以采用以下方法:
1. 使用`watch`监听$route对象的变化,然后在变化时执行相应的刷新操作。具体代码如下:
```javascript
watch: {
$route(to, from) {
// 判断当前路由是否是父路由
if (to.path === '/' && from.path.startsWith('/parent')) {
// 执行刷新操作,例如重新获取数据等
this.reload();
}
}
},
methods: {
reload() {
// 执行刷新操作
}
}
```
2. 在父组件中使用`<router-view :key="$route.fullPath" />`,通过给`router-view`组件设置唯一的`key`属性,可以强制刷新父路由组件。具体代码如下:
```vue
<template>
<div>
<router-view :key="$route.fullPath" />
</div>
</template>
```
以上两种方法都可以实现在子路由跳转回父路由页面时进行刷新。请根据你的需求选择适合的方法。
阅读全文