vue.js - 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 中它不是动态的，
我的意思是当我选择另一个路线时document.title在app.vue中没有改变

在 app.vue 中

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

标签： vue.jsvue-router

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;
},