Vue路由器关于数据更改的参数

Question

我有一个拆分的界面，就像您在以下示例图像中看到的一样。在左侧，您可以看到app.vue内容。在右侧的路由器视图内容。使用app.vue内容顶部的菜单栏，您可以在不同的路由器链接之间切换，因此可以在左侧更改路由器视图。到目前为止一切都很好。

但是现在出现了问题：在我的app.vue中，有一些用户输入存储在数据变量中。用户输入是app.vue内容的一部分，但在路由器视图中也是必需的。

我的当前版本将带有Router-Link参数的用户输入发送到路由器视图。问题在于页面加载以及用户输入更改时，路由器视图上的数据已弃用。为了再次显示正确的数据，我必须触发路由器链接。

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>

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

Answer 1

如果将userinput设置为对象，则该对象将通过引用传递。这样，对该对象所做的任何更新都将反映在持有对该对象的引用的任何组件中。.

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>