Question

我有一个组成部分：相同的路线但参数不同

<router-link :to="{name: 'menu1-mostrar', params: {atr: var1}}"> 
     Menu1
</router-link>

<router-link :to="{name: 'menu1-mostrar', params: {atr: var2}}">
     Menu2
</router-link>

我没有使组件自动更新。我只能通过单击具有不同路线的另一个菜单项来进行更新。

请注意，menu 1和menu 2使用相同的路由。当我单击menu 1然后单击menu 2时，它不会再次调用该路由。例如，我必须打电话给menu 3使用不同的路由，然后menu 2我需要始终将路由称为独立路由。

Answer 1

因为路由是相同的，所以从vue-router的角度来看，不必更改组件。

您的组件必须对参数有反应：在更改参数时更改组件值。

解决方案1：注意组件内部的参数更改。

watch:{
   atr(newValue, oldValue){
      //handle change, maybe refresh 
   }
}

解决方案2：在计算值中使用参数：

computed:{
   myBusinessValue(){
      return this.atr + " is the value of the param atr!!!"
   }
}

根据参数更改时发生的情况，将使用sol1或sol2。您可以提供有关此内容的更多详细信息，以指导您使用另一种方法。

Answer 2

您需要通过$ route对象观察属性，如下所示：

  watch: {
    '$route.params.atr': {
      handler () {
        // Do stuff
      }
    }
  },

Vue.js <router-link>相同的路由但参数不同

2 个答案: