Vue. js Ссылка на маршрутизатор не обновляется - PullRequest
Новая
       21

Vue. js Ссылка на маршрутизатор не обновляется

0 голосов
/ 13 июля 2020

Я столкнулся с проблемой, которую воспроизвел с помощью следующего упрощенного кода:

App. vue

      <router-link to="/">Home</router-link> |
      <router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
         View 1 - Param 1
      </router-link>
      <router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
         View 1 - Param 2
      </router-link>
      <router-view :key='$route.path' />

View1. vue

    <template>
      <div>
        My prop = {{myprop}}
      </div>
    </template>

Если я начну с ссылки «Домой» и нажму «View 1 - Param 1», я попаду в View1 и увижу «My prop = hello 1». Это как и ожидалось.

Если я затем go вернусь на домашнюю страницу и нажму «View 1 - Param 2», я перейду в View1 и увижу «My prop = hello 2». Это также как и ожидалось.

Вот где начинаются проблемы. Если я нажимаю «View 1 - Param 1», когда я уже нахожусь в «View 1 - Param 2», то я попадаю в View1, но сообщение не обновляется. Итак, я снова вижу «My prop = hello 2» вместо «My prop = hello 1».

Насколько я понимаю, Vue не выполняет повторную визуализацию View1 как оптимизацию, поскольку представление «from» и «To» - то же самое, но, очевидно, это не то поведение, которое мне хотелось бы.

Я провел небольшое исследование по этому поводу и наткнулся на видео, в котором предлагалось использовать «key = '$ route.path'» в тег представления адресовал бы это. Однако для меня это не решает проблему.

Каков правильный способ решения этой проблемы, пожалуйста?

1 Ответ

1 голос
/ 13 июля 2020

Ваше решение не сработает, потому что строка $route.path не содержит параметров запроса. Итак, когда вы меняете go с «View 1 - Param 2» на «View 1 - Param 1», $route.path остается таким же и не обновляет вид.

Используйте $route.fullPath this обновит представление, поскольку оно содержит полный разрешенный URL, включая запрос и ha sh. 

<router-link to="/">Home</router-link> |
<router-link :to="{name: 'View1', params: {myprop: 'hello 1'}}"> |
   View 1 - Param 1
</router-link>
<router-link :to="{name: 'View1', params: {myprop: 'hello 2'}}"> |
   View 1 - Param 2
</router-link>
<router-view :key='$route.fullPath' />

В качестве альтернативы вы можете добавить наблюдателя к параметру запроса маршрута внутри вашего «View1. vue» . Таким образом, вам не нужно добавлять key к router-view

View1. vue

<template>
  <div>
     My prop = {{pageProp}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageProp: ""
    }
  },
  watch: {
    "$route.query": {
      immediate: true,
      handler(n) {
        this.pageProp = n.myProp
      }
    }
}
</script>
...