vue跳转相同页面不刷新

在 Vue 中，可以通过使用 `<router-link>` 或 `this.$router.push()` 进行页面跳转，如果想要在相同页面跳转时不刷新页面，可以使用 Vue Router 中的 `keep-alive` 组件。

`keep-alive` 组件可以将组件缓存起来，当再次进入该组件时，直接从缓存中渲染，而不是重新创建和渲染组件。

在路由配置中添加 `keep-alive`：

{
  path: '/example',
  component: ExampleComponent,
  meta: {
    keepAlive: true
  }
}

在需要缓存的组件中添加 `keep-alive`：

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

这样就可以实现在相同页面跳转时不刷新页面了。

相关问题

vue跳转当前页面刷新

在 Vue 中，如果要实现跳转到当前页面并刷新的效果，可以使用 `router.push()` 方法进行路由跳转，并在路由参数中添加一个随机数或时间戳，使每次路由跳转的参数都不相同。

例如：

// 获取当前路由对象
const currentRoute = this.$route;
// 构造新的路由参数，添加随机数或时间戳
const newRouteParams = {param1: 'value1', t: Date.now()};
// 跳转到当前页面并刷新
this.$router.push({name: currentRoute.name, params: newRouteParams}).catch(err => {});

这样每次路由跳转时，都会生成不同的路由参数，从而达到刷新当前页面的效果。

vue3路由跳转当前页面不刷新

vue3中，当路由跳转时，参数不同但路径相同时，页面不会刷新。可以通过在`<router-view>`标签上添加`key`属性来解决这个问题。当`key`属性的值不同时，页面就会重新渲染。

具体的代码如下所示：

<template>
  <router-view :key="route.fullPath"></router-view>
</template>

<script>
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    return {
      route
    }
  }
}
</script>

另外，在`watch`中监听路由的变化，当路由发生变化时可以执行相应的逻辑。例如：

import { useRoute, watch } from 'vue'
const route = useRoute()
watch(route, (newValue, oldValue) => {
  console.log('路由已触发变化', newValue, oldValue)
  // 执行相应的逻辑
})

以上两种方法都可以解决vue3路由跳转当前页面不刷新的问题。个人建议选择第一种方法，更加方便快捷。