Vue параметры маршрутизатора при изменении данных - PullRequest
Новая
       14

Vue параметры маршрутизатора при изменении данных

0 голосов
/ 29 октября 2018

У меня разделенный интерфейс, как вы можете видеть на следующем примере изображения. Слева вы можете увидеть содержимое app.vue. Справа роутер-просмотр контента. С помощью строки меню в верхней части содержимого app.vue вы можете переключаться между различными ссылками на маршрутизатор и, следовательно, изменять вид маршрутизатора на левой стороне. пока все хорошо.

example1

Но теперь проблема: в моем app.vue есть пользовательские входы, которые хранятся в переменных данных. Пользовательский ввод является частью содержимого app.vue, но также необходим в представлении router.

enter image description here

Моя текущая версия отправляет ввод пользователя с параметрами ссылки на маршрутизатор в представление маршрутизатора. Проблема заключается в том, что при загрузке страницы и при изменении пользовательского ввода данные в представлении маршрутизатора устаревают. Чтобы снова отобразить правильные данные, я должен активировать ссылки на маршрутизатор.

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>

Как я могу перезагрузить представление роутера при каждом изменении ввода пользователя? И как я могу отправить значение пользовательского ввода по умолчанию при загрузке страницы на ссылку маршрутизатора по умолчанию?

1 Ответ

0 голосов
/ 29 октября 2018

Если вы сделаете ваш 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>
...