vue-router 访问同一路由,刷新页面
时间: 2023-02-12 13:12:53 浏览: 81
使用 vue-router 访问同一路由并刷新页面可以使用 $router.go() 或 $router.replace() 方法。
$router.go() 方法可以跳转到历史记录中的特定偏移量,负数表示后退,正数表示前进。
$router.replace() 方法可以替换当前路由记录,不会留下历史记录。
例如:
```
this.$router.go(0)
```
或
```
this.$router.replace({path: '/same-route'})
```
如果您想在访问同一路由时重新渲染组件,可以使用key属性
例如:
```
<router-view :key="$route.fullPath"></router-view>
```
这样就能在访问同一路由时重新渲染组件了。
相关问题
vue-route访问同一路由刷新页面
在 Vue Router 中,如果要在访问同一路由时刷新页面,可以使用 $router.replace() 方法来替代 $router.push() 方法。这样可以避免路由记录中产生重复的记录,并且使用 $router.go(-1) 或 $router.back() 返回时不会返回到当前路由。
例如:
```
this.$router.replace({path: '/current'});
```
或者
```
this.$router.replace({path: this.$route.path});
```
使用这种方式刷新页面时,需要注意的是会触发导航守卫中的 beforeRouteUpdate 钩子函数。
vue 同一路由强制刷新
在vue中,同一个路由被重复访问时,组件并不会被重新加载,而是会直接复用之前加载的组件,这可能会导致一些数据或逻辑问题。如何在同一路由强制刷新组件呢?
一种简单的方法是使用key属性。在路由切换时给组件加上key属性,每次切换时key值都会改变,这样组件就会被强制重新加载。例如,在路由跳转时通过下面的代码给组件加上key属性:
<router-view :key="$route.fullPath"></router-view>
这里用到了$route对象的fullPath属性,表示当前路由的完整路径,用作key属性的值。这样,每次路由切换时,组件就会强制刷新。
另外一种方法是使用watch监听$route对象的变化,然后手动调用组件的刷新方法。例如:
watch: {
$route: function(to, from) {
if(from.path === to.path) {
this.$router.go(0); // 刷新当前页
}
}
}
这里的watch监听了$route对象的变化,如果当前路径与上一个路径相同,则调用$route的go方法,参数为0表示刷新当前页。这样组件也会被强制刷新。
无论哪种方法,都需要注意在强制刷新组件时可能会导致数据丢失或逻辑问题,需要在业务逻辑上进行适当的处理。