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

相关问题

vue3路由跳转页面不刷新

在Vue3中，使用Vue Router进行路由跳转时，通常情况下会出现页面刷新的情况。如果你想要实现路由跳转但是不刷新页面，可以使用Vue Router提供的导航守卫来实现。

具体来说，你可以在导航守卫中使用`next(false)`来阻止页面刷新。例如，你可以在路由配置中定义一个`beforeEnter`守卫：

const routes = [
  {
    path: '/home',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 阻止页面刷新
      next(false)
    }
  }
]

在这个例子中，如果用户尝试访问`/home`路由，页面不会刷新，但是路由状态仍然会发生变化。

另外，需要注意的是，这种方式可能会导致一些问题，例如路由状态与页面状态不一致等。因此，建议仅在必要的情况下使用这种方式。

vue3路由跳转刷新页面

在Vue3中，可以使用`router.push()`或`router.replace()`方法进行路由跳转，但默认情况下不会刷新页面。如果需要在路由跳转时刷新页面，可以在路由对象中添加`meta`字段并设置一个随机数，每次路由跳转时将`meta`字段的值更新为新的随机数，从而强制刷新页面。示例如下：

// router.js
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { refresh: true } // 添加 meta 字段
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { refresh: true } // 添加 meta 字段
    }
  ]
})

// App.vue
<template>
  <div>
    <router-view :key="$route.meta.refresh" /> <!-- 在 router-view 上绑定 key 属性 -->
  </div>
</template>

这样每次路由跳转时，`router-view`组件的`key`属性都会更新，从而强制刷新页面。