vue.js - Vuejs相同的路线但不同的参数

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如果我已经在其中，我需要始终独立调用该路由。

标签： vue.js

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。您可以提供有关该内容的更多详细信息，以指导您选择其中一个。