如果路由器不在路由器视图范围内，如何使组件监视路由器？

Question

当路由器更改url时，我无法使v-if元素从函数中获取布尔值。

这是我的组件标头代码

<template>
    <header class="wfm-header">
        <div class="wfm-header__navigations">
            <div class="wfm-header__logo"></div>
        </div>
        <div
                v-if="isPlan"
                class="wfm-header-plan"
        >
            <div
                    class="wfm-header-plan__calendar"
                    v-if="isAuth || shopName">
                <wfm-calendar />
            </div>
        </div>
    </header>
</template>

<script lang="ts">
    @Component({
        components: {
            wfmCalendar,
        }
    })
    export default class wfmHeader extends Vue {
        ...
        get isPlan() {
            return this.$router.currentRoute.name === RouteNames.PLAN // it works only after Reload page
        }
        @Watch('$router.currentRoute.path')
        changeRouter() {
            console.log('plzChange') // it doesnt work
        }
    }
</script>

当我的路线更改时，我想更改isPlan值。我尝试使用watch.fothis。$ router并使用beforeRouteUpdate它没有帮助，我该怎么办？

Answer 1

您可以尝试 像这样在组件的$ route上设置观察者：

watch:{
    $route (to, from){
        // react to route changes
    }
} 

或者如果您需要打字稿，请检查以下问题：

Watch route changes in Vue.js with Typescript