Лучшая практика для реагирования на паромы Изменения с Vue Router

При использовании Vue Router с такими маршрутами, как /foo/:val, вы должны добавить наблюдателя в реагировать на изменения параметров. Это приводит к несколько раздражающему дублирующему коду во всех представлениях, у которых есть параметры в URL.

Это может выглядеть следующим образом:

export default {
    // [...]
    created() {
        doSomething.call(this);
    },
    watch: {
        '$route' () {
            doSomething.call(this);
        }
    },
}

function doSomething() {
    // e.g. request API, assign view properties, ...
}

Есть ли другой способ преодолеть это? Можно ли комбинировать обработчики для created и $route? Можно ли отключить повторное использование компонента, чтобы наблюдатель вообще не нуждался? Я использую Vue 2, но это может быть интересно и для Vue 1.

Ответы

Ответ 1

Один из возможных ответов, который я только что нашел благодаря key, который также используется для v-for, чтобы изменения Vue отслеживались в представлении. Для этого вам нужно добавить атрибут в элемент router-view:

<router-view :key="$route.fullPath"></router-view>

После того, как вы добавите это в представление, вам больше не нужно смотреть $route. Вместо этого Vue.js создаст совершенно новый экземпляр компонента, а также вызовет обратный вызов created.

Однако это решение "все или ничего". Кажется, он хорошо работает на небольшом приложении, которое я сейчас разрабатываю. Но это может повлиять на производительность в другом приложении. Если вы действительно хотите отключить повторное использование представления только для некоторых маршрутов, вы можете посмотреть на значение key на основе маршрута. Но мне не очень нравится этот подход.