如何实现VueJS Router Link的ID参数自增1且页面正常加载？

根本原因 #

• 第一种写法里用的this.id是组件初始化阶段赋值的变量，Vue Router默认对同一组件的路由跳转（仅参数变化）会复用组件实例，不会触发销毁重建，因此this.id始终保持初始值，后续跳转时参数无法继续自增。
• 第二种写法直接读取响应式的$route.params.id，因此href属性可以正常更新，但同样因为组件复用逻辑，created、mounted等初始化生命周期钩子不会重新执行，你写在这些钩子里的根据id拉取页面数据的逻辑不会触发，导致页面内容无更新。

可用解决方案 #

方案1：监听路由参数变化（推荐，性能最优） #

在Painting组件内添加对路由id参数的监听，参数变化时重新触发数据拉取逻辑：

// Vue2选项式API写法
watch: {
  '$route.params.id'(newId) {
    // 替换为你实际的页面数据请求方法
    this.getPaintingDetail(newId)
  }
}

如果使用Vue3组合式API：

import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
watch(
  () => route.params.id,
  (newId) => {
    getPaintingDetail(newId)
  },
  { immediate: true } // 开启immediate后首次加载也会执行请求逻辑
)

如果要保留this.id的写法，同步更新该变量即可：

watch: {
  '$route.params.id'(newId) {
    this.id = newId
    this.getPaintingDetail(newId)
  }
}

方案2：强制组件重建（适合简单页面） #

在路由出口router-view标签上绑定key为路由完整路径，强制路由参数变化时销毁旧组件、创建新组件，无需修改业务逻辑：

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

该方案缺点是会触发完整的组件生命周期，性能略低于方案1。

方案3：使用force属性（Vue Router 4+专属） #

如果你使用的是Vue Router 4.x版本，可以直接在router-link上添加force属性，强制跳转时重新渲染组件：

<router-link
  :to="{
    name: 'painting',
    params: { id: Number($route.params.id) + 1 },
  }"
  force
>Next</router-link>

内容的提问来源于stack exchange，提问作者Alejandro Arias Aguilar