Есть компонент условно говоря StepComponent, который отвечает за страницу `/steps`
<template>
<div>
<b-row v-show="currentStep === 1">
</b-row>
<b-row v-show="currentStep === 2">
</b-row>
</div>
</template>
И есть компонент SearchComponent, который встроен в хедере и видимый на всех страницах.
<template>
<div v-bind:class="{ active: searchOpen }">
<input type="text" v-model="code" />
<button v-on:click="openStep">
</button>
</div>
</template>
Когда я ввел данные в этом поиске, необходимо открыть страницу `/steps` на том шаге, который был указан в поиске.
<script>
export default {
data() {
return {
code: ""
};
},
methods: {
openScan() {
// обновляем свойство принудительно, чтобы обновить <router-view>
// https://laracasts.com/discuss/channels/vue/vue-2-reload-component-when-same-route-is-requested
this.$router.forceReloadKey = new Date().getTime();
this.$router.push({ path: "/steps", params: { currentStep: 2 } });
}
}
};
</script>
App.vue
<template>
<div id="app">
<component :is="layout">
<transition name="fade" mode="out-in">
<router-view :key="$route.forceReloadKey"></router-view>
</transition>
</component>
</div>
</template>
По факту дочерние компоненты не обновляются - события created, mounted не вызываются заново , более того даже наблюдение за свойством роутера напрямую не помогло.
export default {
components: { },
data() {
return {
currentStep: 1
};
},
mounted() {
// срабатывает только раз
console.log("mounted");
},
created() {
// срабатывает только раз
console.log("created");
},
methods: {}
watch: {
"this.$router.forceReloadKey"() {
// не срабатывает при обновлении forceReloadKey из другого компонента
console.log("forceReloadKey");
}
}
};
Простой
