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

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

vue.js使用beforeRouteUpdate将数据传递到路由

1 个答案: