javascript - vue 路由器参数关于数据更改

Question

我有一个拆分界面，您可以在下面的示例图片中看到它。在左侧你可以看到 app.vue 的内容。右侧是路由器 View 内容。通过 app.vue 内容顶部的菜单栏，您可以在不同的路由器链接之间切换，从而更改左侧的路由器 View 。到目前为止一切顺利。

但现在的问题是:在我的 app.vue 中，用户输入存储在数据变量中。用户输入是 app.vue 内容的一部分，但在路由器 View 中也需要。

我当前的版本将带有路由器链接参数的用户输入发送到路由器 View 。问题是在页面加载和用户输入更改时，路由器 View 上的数据已被弃用。要再次显示正确的数据，我必须触发路由器链接。

App.vue:

<template>
  <div>

    <router-link :to="{ name: 'route01', params: { data: userinput } }">
      01 route
    </router-link>

    <router-link :to="{ name: 'route02', params: { data: userinput } }">
      02 route
    </router-link>

  </div>
</template>


<script>
export default {
  data: function() {
    return {
      userinput: 'foo',
    }
  }
}
</script>

route01.vue:

<template>
<div class="container">
  <h1>{{userinput}}</h1>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      userinput: 'no input',
    };
  },
  created: function() {
    this.userinput = this.$route.params.userinput;
  }
}
</script>

如何在每次用户输入更改时重新加载路由器 View ？以及如何将页面加载时的默认用户输入值发送到默认路由器链接？

Answer 1

如果您将 userinput 设为一个对象，它将通过引用传递。这样，对该对象所做的任何更新都会反射(reflect)在任何持有对同一对象的引用的组件中..

App.vue

<template>
  <div>

    <router-link :to="{ name: 'route01', params: { userinput } }">
      01 route
    </router-link>

    <router-link :to="{ name: 'route02', params: { userinput } }">
      02 route
    </router-link>

  </div>
</template>


<script>
export default {
  data: function() {
    return {
      userinput: { text: 'foo' },
    }
  }
}
</script>

route01.vue

<template>
<div class="container">
  <h1>{{ userinput.text }}</h1>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      userinput: { text: 'no input' },
    };
  },
  created: function() {
    this.userinput = this.$route.params.userinput;
  }
}
</script>