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

Question

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

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

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

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>

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

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>

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

vue router params on data change

javascript

vue.js

vue-router

vuejs2