Vue.js Vue：参数值don'；在创建方法中不进行更改

我有此链接到另一个带有参数的组件：

<div class="dropdown-menu bg-light" aria-labelledby="navbarDropdown">
      <div v-for="category in categories" :key="category.id">
         <div v-if="lang=='ku'"><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ku}}</router-link></a></li></div>

          <div v-else><li><a class="dropdown-item font-weight-bold py-2" href="#" ><router-link :to="{name:'category',params:{id:category.id}}">{{category.catagory_ar}}</router-link></a></li></div> 
          </div>
     </div>

类别组件如下所示：

<template>
    <div style="margin-top:132px">
        Categories {{id}}
    </div>
</template>
<script>
export default {
data(){
    return {
        id :''
    }
},
created(){
    this.id=this.$route.params.id
}
}
</script>

类别{{id}
导出默认值{
数据（）{
返回{
id:“”
}
},
创建（）{
this.id=this.$route.params.id
}
}

---

当我按下route链接时，url中的id值发生了变化，但在页面视图中，它只取我单击的第一个id值，在我单击另一个相同的链接后，不同的id值不会发生变化。请尝试将

id

定义为计算属性：

<template>
    <div style="margin-top:132px">
        Categories {{id}}
    </div>
</template>
<script>
export default {
   computed:{
      id(){
        return this.$route.params.id
      }
 }
}
</script>

类别{{id}
导出默认值{
计算：{
id（）{
返回此。$route.params.id
}
}
}

这应该在安装的挂钩中

created(){
    this.id=this.$route.params.id
}
// replace with
mounted(){
    this.id = this.$route.params.id
}

另外，如果您想执行一些与id更改相关的额外操作，您可以

查看

路线

<template>
    <div style="margin-top:132px">
        Categories {{ id }}
    </div>
</template>
<script>
export default {
data() {
    return {
        id: ''
    }
},
mounted() {
    this.id = this.$route.params.id
},
watch: {
    $route(to) {
      this.id = to.params.id
      // do other logics here
    }
}
</script>

类别{{id}
导出默认值{
数据（）{
返回{
id:“”
}
},
安装的（）{
this.id=this.$route.params.id
},
观察：{
$route（to）{
this.id=to.params.id
//这里还有其他逻辑吗
}
}