vue-router neither watch route or navigation guards firing

Question

Using vue-router in a single page application with the code below, the watch $route function in not firing when redirecting to mycomponent.

Also the beforeRouteUpdate in mycomponent is also not firing.

How can I detect when a variable has been tagged on to a route during component load?

App.vue

<template>
  <router-view></router-view>
</template>
<script>
import Vue from 'vue'
export default {
  name: 'app'
}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import MyView from '@/views/MyView'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home',
      name: 'Home',
      children: [
        {
          path: '/mycomponent',
          name: 'MyComponent',
          component: MyComponentView
        },
        {
          path: '/mycomponent/:id',
          component: MyComponentView,
          props: true
        }
]}]})

mycomponent.vue

<template>
  <component :is="activeComponent" :id="id"></component>
</template>

<script>
  export default {
    name: 'MyComponentView',
    components: {
      ...
    },
    mounted: function() {
      #this logs path in browser
      console.log('>>mounted route: ' + this.$route.path)
    },
    watch: {
      '$route': function () {
        #this does not fire
        console.log('route watcher: ' + this.$route.path)
      }
    },
    beforeRouteUpdate (to, from, next) {
      #this does not fire
      console.log('>>beforeRouteUpdate')
    },
    data () {
      return {
        activeComponent: 'somecomponent'
      }
    }
  }
</script>

component1.vue

...
mounted: function() {
  Event.$on('vue-tables.row-click', function(data) {
    #this logs correct information in browser
    console.log('data.row.id: ' + data.row.id)
    router.push({path: 'mycomponent', query: {id: data.row.id}})
  })
},
...

The redicection to mycomponent works, and the mounted function works fine, just not the watch or beforerouteUpdate functions. — proximacentauri

test test · Accepted Answer · 2018-02-04T11:06:00

It doesn't work because beforeRouteUpdate is in component which is going to reload (Look at Life cycle of Vue). When you change the route, watch & beforeRouteUpdate is terminated and you won't see any results. In this scenario you should provide something like this:

MainRouterView.vue

<template>
  <router-view/>
</template>

<script>
  name: 'MainRouterView',
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
  },
</script>

router.js

export default new Router({
  routes: [
    {
        {
          path: '/mycomponent',
          name: 'MainRouterView',
          component: MainRouterView,
          children: [
            {
              path: '/mycomponent/:id',
              component: SecondComponent,
            }
          ]
        },
      }]})

But if you want to stick up with your structure and check the status of the current route, you can replace beforeRouteUpdate to beforeRouteEnter or beforeRouteLeave in the component. You can use global guard beforeEach in router as well.

To better understand how beforeRouteUpdate works, check out this snippet: http://jsfiddle.net/yraqs4cb/

vue-router neither watch route or navigation guards firing

1 Answers

MainRouterView.vue

router.js