When vue components are reused, the address parameters of dynamic routing do not change.

problem description

there is a page that needs to reuse components. There is a list of goods on the left and details on the right. When I click on the list on the left, the corresponding information will be displayed on the right. I did it using dynamic routing. The problem now is to click on the list. The routing parameters of the address bar will not change, but in fact, it has changed,

.

the environmental background of the problems and what methods you have tried

before adding the ajax request, click the list on the left, and the routing parameters of the address bar will change, but after adding the request and clicking on the left, the parameters of the address bar will not change. The console does not report an error. I use routing guards to listen. In fact, the routing parameters have changed, but they are not dynamically displayed in the address bar. Routing parameters have always been parameters for page initialization.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
Route definition:
`

    {
      path: "/currency",
      component: resolve => require(["@/pages/currency_exchange"], resolve),
      children:[
        {
          path: "/",
          redirect: "coin_main/00",
          component: resolve => require(["@/pages/currencyExchange/index.vue"],resolve)
        },
        {
          path: "coin_main/:id",
          component: resolve => require(["@/pages/currencyExchange/index.vue"],resolve)
        }
      ]
    },

`

clipboard.png
Click on the list at this time, and the dynamic parameter id should change, but will not change.
the beforeRouterUpdate I use handles it, and the business logic can respond normally:

 beforeRouteUpdate(to, from, next) {
      this.init(to.params.id);
      this.initTable(to.params.id);
      clearInterval(this.enter);
      clearInterval(this.update);
      clearInterval(this.routerUpdate);
      //
      this.routerUpdate = setInterval(()=> {
        this.initTable(to.params.id);
      },5000);
      this.status = this.$store.state.get;
  },

what result do you expect? What is the error message actually seen?

The expected result of

is to click on the list on the left, and the routing parameter id in the address bar can respond to changes. The console does not report an error.

Apr.07,2021

next ()?

Menu