vue 路由跳转不刷新
时间: 2023-11-07 15:59:38 浏览: 497
Vue路由切换页面不更新问题解决方案
5星 · 资源好评率100%
在 Vue 中使用路由跳转时,如果不想刷新页面,可以使用以下两种方法:
1. 使用 Vue Router 的编程式路由跳转
编程式路由跳转是指通过代码控制路由跳转,而不是通过 `<router-link>` 标签或 `this.$router.push()` 方法跳转。使用编程式路由跳转时,可以选择不刷新页面。例如:
```javascript
this.$router.push({ path: '/target', params: { id: 1 }, query: { name: 'John' }, replace: true });
```
上面的代码通过 `$router.push()` 方法跳转到路径为 `/target` 的页面,并传递了一些参数。其中,`replace` 参数表示替换当前页面,不会在浏览器历史中留下记录,实现了不刷新页面跳转。
2. 利用 Vue Router 的导航守卫
Vue Router 提供了导航守卫,可以在路由跳转前、后、取消等不同阶段执行一些操作。利用导航守卫,可以实现在跳转时不刷新页面。例如:
```javascript
const router = new VueRouter({
routes: [
{
path: '/target',
component: Target,
meta: { skipRefresh: true }
}
]
});
router.beforeEach((to, from, next) => {
if (to.meta.skipRefresh) {
to.meta.skipRefresh = false;
next(false);
} else {
next();
}
});
```
上面的代码定义了一个 `skipRefresh` 属性,表示是否跳转时不刷新页面。在导航守卫的 `beforeEach` 方法中,如果目标路由的 `meta.skipRefresh` 属性为 `true`,则将其设置为 `false` 并取消跳转,实现了不刷新页面跳转。
阅读全文