如果我在另一个组件中添加beforeRouteEnter，则$ route在一个组件中变得不确定

Question

I'm stuck. For some reason I can't access this.$route anymore in one component after I put beforeRouteEnter method in another component.

My app looks like this.

<div id="app">
    <settings-modal></settings-modal>

    <router-view name="CalendarMonthView"></router-view>
</div>

The CalendarMonthView component is loaded in the router view. And there is a beforeRouteEnter inside it. But then my SettingsModal component says that on created() the this.$params is undefined. Before I used beforeRouteEnter it wasn't undefined.

CalendarMonthView component

export default {
    ...

    // to.params.selectedYear  = 2019
    // to.params.selectedMonth = 3

    beforeRouteEnter (to, from, next)
    {
        Month.getDays({
            year: to.params.selectedYear,
            month: to.params.selectedMonth,
         }).then(response => {
             store.monthDays = response.data
             next()
         })
    }
}

SettingsModal component

export default {
    ...

    created()
    {
        // undefined
        console.log('selectedYear: ', this.$route.params.selectedYear)

        // undefined
        console.log('selectedMonth: ', this.$route.params.selectedMonth)
    }
}

Answer 1

I don't know what you mean by this function Month.getDays() . Maybe there was an error in the function that caused next() not to be called.You should check that your function is correct.

Answer 2

Route params aren't available yet as the navigation hasn't finished. It needs to wait for Month.getDays promise to resolve.

You try to access the params from SettingsModal as soon as it is created which happens before the promise resolves.

You can try to watch $route and check the params then.

watch: {
  '$route': 'checkParams'
 },

This goes in SettingsModal .