Vue3同路由切换时无法获取更新后params参数值的问题

你的代码存在逻辑错误，核心是Vue Router的组件复用机制：当多个路由路径匹配渲染同一个组件时，Vue不会重复销毁、创建组件实例，只会更新组件内的路由相关属性，因此组件的created生命周期钩子仅会在组件首次渲染时执行一次。
你首次切换选项进入SelectProject.vue时，组件是第一次创建，created钩子正常运行，可以拿到初始token；后续切换选项跳转到同路由下的其他token地址时，组件已经挂载完成，created钩子不会再次触发，你写在钩子内的参数读取、接口请求逻辑都不会执行，自然无法获取更新后的token值。

两种常用方案任选其一即可：

• 方案1：监听路由变化，参数更新时重新执行页面逻辑
  把页面初始化逻辑抽成单独方法，除了created阶段执行，同时监听路由对象的变化，路由参数更新时重新调用初始化方法，参考代码：

  export default {
    data() {
      return {
        projectToken: '',
        pageData: {}
      }
    },
    created() {
      this.initPageData()
    },
    watch: {
      $route(to) {
        if (to.name === 'select-project') {
          this.initPageData()
        }
      }
    },
    methods: {
      initPageData() {
        this.projectToken = this.$route.params.token
        console.log('current token:', this.projectToken)
        this.$http.get("/ecommerce/data").then((response) => {
          this.pageData = response.data
          const userData = getUserData()
          this.pageData.congratulations.name = userData.username
        })
      }
    }
  }
  

• 方案2：给路由出口绑定key，强制参数变化时重建组件
  在放置<router-view>路由出口的父组件中，给标签绑定基于路由完整路径的key值，只要路由地址发生变化，Vue就会销毁旧组件实例、重新创建新组件，原有created内的逻辑就会每次跳转都正常触发：

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

  注意：该方案实现简单，但会在路由切换时重置组件内所有临时状态（比如未提交的表单输入、自定义滚动位置等），如果你的页面有这类需要保留的状态，优先选方案1。

内容的提问来源于stack exchange，提问作者Shibbir