刷新页面路由需要停留在当前路由 vue3

在 Vue3 中，可以使用 `router.replace()` 方法来实现刷新页面路由后停留在当前路由。具体实现方式如下：

// 获取当前路由对象
const currentRoute = router.currentRoute.value;

// 刷新当前路由
router.replace({
  path: currentRoute.path,
  query: currentRoute.query,
  params: currentRoute.params
});

这样就可以实现刷新页面路由后停留在当前路由了。

相关问题

刷新页面路由需要停留在当前路由 vue

如果你想在刷新页面后仍然停留在当前路由，你可以使用 `beforeunload` 事件来拦截页面刷新，然后手动保存当前路由信息到 `localStorage` 中。当页面重新加载时，你可以从 `localStorage` 中获取之前保存的路由信息并使用 `router.push` 方法来跳转到该路由。下面是一个示例代码：

// 在 beforeunload 事件中保存当前路由信息
window.addEventListener('beforeunload', function(e) {
  localStorage.setItem('lastRoute', JSON.stringify(router.currentRoute))
})

// 在页面重新加载时获取之前保存的路由信息并跳转到该路由
window.addEventListener('load', function() {
  const lastRoute = JSON.parse(localStorage.getItem('lastRoute'))
  if (lastRoute && lastRoute.path !== router.currentRoute.path) {
    router.push(lastRoute)
  }
})

需要注意的是，这种方法并不是完全可靠的，因为用户可能会在浏览器中直接输入 URL 或者使用浏览器的前进/后退按钮来导航到其他页面。如果你需要更可靠的路由状态管理，可以考虑使用 Vuex 或者其他状态管理库来保存路由信息。

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路由跳转当前页面不刷新的问题。个人建议选择第一种方法，更加方便快捷。