How to keep track of route parameters updates?

Question

JavaScript

Given:

vue-router

{
        path: '/data-list/:list_slug',
        name: 'data_list',
        component: data_list,
        meta: {
            requiresAuth: true,
            breadcrumbs: [
                {
                    'url': 'data_list',
                    'title': 'Data'
                },
                {
                    'title': ''
                }
            ]
        },
        children: [
            {
                path: ':list_id',
                name: 'data_list.edit',
                component: data_list
            }
        ]

    }

It is necessary to follow the update inside the component. :list_slug
I can't figure out how to do it. I tried to assign it as a variable in data(){return{***}} and make a deep watch but it didn't help. How can this be done? Google did not help (

Answer 1

Try like this:

watch: {
  '$route.params.list_slug': function (listSlug) {
    console.log(listSlug); // выводим новое значение параметра роута
    this.doSomething(); // выполняете что нужно
  },
},

You can also "follow" the route object in its entirety:

watch: {
  '$route': function (to, from) {
    // выполняем что-либо, когда роут меняется
  },
},

Similar examples are described in the documentation .