vue.js pass data to route using beforeRouteUpdate - vue.js

Question

vue.js I am trying to pass data from route to app.vue ,
I am relying on beforeRouteUpdate
what I am trying to do is
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 is working put it's not dynmaic in the app.vue ,
what i mean is when i choose anther route document.title does not change in the app.vue
in app.vue
data(){
return {
getselected : document.title,
}
},
mounted() {
console.log('getselected - '+ this.getselected );
},

Answer 1

As far as I know, the function beforeRouteUpdate is a component hook. Then, you can't use this inside your router. But you can pass a param to your route, via query.
Your router:
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') },
},
]
Your component:
data(){
return {
documentTitle: '',
}
},
mounted() {
this.documentTitle = this.$route.query.title;
},
In other way, you can use your path name inside your component. You even don't need to declare query in your router.
data(){
return {
documentTitle: '',
}
},
mounted() {
this.documentTitle = this.$route.path.name;
},