CODEWITHSUNDEEP
typescriptvue.jsvue-router
4e4e4i
4e4e4i

Reputation: 121

How to make component watch for router if it is outside router-view?

I cant make v-if for element get boolean from function when router changes url.

this is my code for component Header

<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>

enter image description here

I want to change isPlan value, when my route is changes. I tried use watch fo this.$router and used beforeRouteUpdate it doesnt help, what should i do for this?

Upvotes: 1

Views: 673

Answers (1)

Loki
Loki

Reputation: 1205

You can try to Setup a watcher on the $route in your component like this:

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

Or if you need in typescript, check this issue:

Watch route changes in Vue.js with Typescript

Upvotes: 2

Related Questions