Блог

Главная - Вопросы по программированию - Параметры маршрутизатора Vue не обновляются на странице

Параметры маршрутизатора Vue не обновляются на странице

#javascript #vue.js #vue-router #vuejs3

Вопрос:

Здравствуйте, у меня есть некоторая условная логика в моем представлении, основанная на текущей странице

в настройках у меня есть

 const curVidType = ref(route.params.videoTopic);

Я возвращаю его, а затем распечатываю, как

 <h1>Welcome to  {{ curVidType }} videos</h1>

Однако это работает только в том случае, если я обновлюсь. Если я перейду на новую страницу, она останется старой, даже если URL-адрес браузера изменится. после обновления он обновляется. Большое спасибо за любую помощь

Ответ №1:

Попробуйте добавить :key в свой компонент, чтобы убедиться, что он обновляется при изменении параметров:

 <your-component :key="$route.params.videoTopic"></your-component>

Ответ №2:

Вы инициализируете переменную как константу, что означает, что она делает это один раз, а затем не устанавливает ее. Если вы измените curVidType на вычисляемое значение, вы можете заставить его реагировать на изменения параметров маршрутизатора.

 computed: {
  curVidType() {
    return route.params.videoTopics
  }
}

Для этого будет установлено значение curVidType, которое будет изменяться, когда это сделает видеопика

Редактировать:

Прочитав комментарии, просмотрев комментарии и прочитав некоторые документы, ref() создаст реактивный объект, но я не уверен, что он реагирует на исходный объект. Но похоже, что функция toRef() может создать этот мост.

 const curVidType = toRef(route.params, 'videoTopics')

Должно позволять curVidType.value также отражать изменения в route.params.videoTopics

Комментарии:

1. Это не тот случай. Конечно computed , это должно помочь, но ref возвращает ProxyObject с реактивным value свойством. Это свойство переопределяется, а не все const

2. Тип curVidType является реактивным, но что меняет значение? Он устанавливается инициализацией ref(route.params.videoTopic), но это означает, что объект curVidType имеет значение, заданное полем. route.params.videoTopic меняется, но curVidType-нет.

Ответ №3:

Было бы неплохо, если бы вы могли поделиться с нами еще каким-нибудь кодом, чтобы помочь вам. Это должно просто отлично работать

 <template>
{{ curVidType }}
</template>

<script>
import { useRoute } from 'vue-router';

export default {
    setup() {
        const { params } = useRoute();
        const curVidType = params.videoTopic

        return {
            curVidType,
        };
    },
};
</script>
Метки: