vue路由跳转但是页面刷新才显示
时间: 2023-09-20 17:00:39 浏览: 133
在Vue中,路由跳转默认是通过HTML5的history模式实现的,而不是通过传统的URL跳转。所以在路由跳转时,页面是不会刷新的。但是有时候我们希望在路由切换后页面能够刷新去展示新的数据或状态。
要实现在路由跳转后页面刷新的效果,可以通过以下几种方式来实现:
1. 使用watch监听路由变化,在路由变化时执行刷新操作。可以在组件中使用$watch来监听$route对象的变化,并在变化时执行需要刷新的逻辑,例如重新获取数据等。代码示例如下:
```javascript
watch: {
'$route': function() {
// 执行刷新操作
location.reload();
}
}
```
2. 使用组件的updated钩子函数,在组件更新后执行刷新操作。updated钩子函数会在组件重新渲染后被调用,可以在其中执行刷新逻辑,例如重新获取数据等。代码示例如下:
```javascript
updated() {
// 执行刷新操作
location.reload();
}
```
3. 使用<router-view>组件的key属性,在路由切换时强制重新渲染。给<router-view>组件添加一个唯一的key属性可以让Vue在路由切换时强制重新渲染组件,从而达到刷新页面的效果。示例如下:
```html
<router-view :key="$route.fullPath"></router-view>
```
以上是几种简单的实现在路由跳转后页面刷新的方法。根据具体的需求场景和代码结构,可以选择适合自己的方式来实现。
阅读全文