vue.js передает данные в маршрут, используя beforeRouteUpdate

Question

vue.js Я пытаюсь передать данные из маршрута в app.vue,
Я полагаюсь на beforeRouteUpdate
что я пытаюсь сделать, это

    routes: [
      {
          path: '/dashboard',
          name: 'dashboard',
          component: function () {  return import( './views/dashboard.vue')  },

          beforeRouteUpdate: (to, from, next) => { document.title = 'dashboard';  next(); }
      },
        {
          path: '/home',
          name: 'home',
          component: function () {  return import( './views/home.vue')  },

          beforeRouteUpdate: (to, from, next) => { document.title = 'home';  next(); }
        },

document.title работает, но в приложении app.vue это не dynmaic,
что я имею в виду, когда выбираю другой маршрут document.title не изменяется в app.vue

в app.vue

data(){
  return { 
    getselected :  document.title, 
  }
},
mounted() {
    console.log('getselected  - '+ this.getselected );
},

Answer 1

Насколько я знаю, функция beforeRouteUpdate является хуком компонента. Тогда вы не можете использовать это внутри своего маршрутизатора. Но вы можете передать параметр вашему маршруту, используя запрос.

Ваш роутер:

routes: [
      {
          path: '/dashboard',
          name: 'dashboard',
          query: {title: 'dashboard'},
          component: function () {  return import( './views/dashboard.vue')  }, 
      },
        {
          path: '/home',
          name: 'home',
          query: {title: 'home'},
          component: function () {  return import( './views/home.vue')  },
        },
]

Ваш компонент:

data(){
  return { 
    documentTitle:  '', 
  }
},
mounted() {
    this.documentTitle = this.$route.query.title;
},

Иначе, вы можете использовать ваше имя пути внутри вашего компонента. Вам даже не нужно объявлять query в вашем роутере.

data(){
  return { 
    documentTitle:  '', 
  }
},
mounted() {
    this.documentTitle = this.$route.path.name;
},