如何在 Nuxt/Vue 中重定向路由并调用已安装的钩子? [英] How to redirect route in Nuxt/Vue and recall the mounted hook?

问题描述

Nuxt 新手问题:

我尝试使用不同的参数重定向到相同的路由，但不知道如何使用 $nuxt 来推送路由，所以我尝试了下面的 vue 路由器.

I try to redirect to the same route with a different param, and have no idea how to use $nuxt to push the route so I tried the below vue router.

url 已更改，但未调用挂载钩子来更改数据

The url is changed but mounted hook does not get invoked to change the data

methods: {    
  changeMatch(event) {
 
  this.$router.push({
    name: "tran-dau-id-tuong-thuat",
    params: { id: event.target.value },
  });
},

更新:我关注https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

watch: {
    $route(to, from) {
      if (to.params.id != from.params.id) {
        this.loadFixture();
      }
    },
  },

推荐答案

你必须观察路由器参数的变化.

You have to watch the router param for changes.

watch: {
  id(newId) {
    // has changed call mounted logic again ...
    this.getDataAgainLogic(newId) ... 
  }
}

Vue Router 文档:响应参数变化

Vue Router Documentation: Reacting to Params Changes

这篇关于如何在 Nuxt/Vue 中重定向路由并调用已安装的钩子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！