javascript - 如何根据路由和使用 vue-route 更改 Vue 组件中的数据对象？

Question

我在处理 vuejs 应用程序时遇到问题:

我必须根据路由更改几个 vuejs 组件中的标题

路线:[
{
小路: '/'，
components: {//带有默认数据
第一屏，
优点，
slider ，
},
},
{
路径:'/莫斯科'，
components: {//带有莫斯科的特殊数据
第一屏，
优点，
slider ，
},
},
{
路径:'/柏林'，
components: {//柏林的特殊数据
第一屏，
优点，
slider ，
},
},
],

所有 .vue 文件中的数据如下所示

data() {
  return {
    defaultTitle: 'some string',
    defaultArray: ['defaultFirst', 'defaultSec'],
  };
},

我有大约 100 个城市...我该如何解决这个问题？

Answer 1

假设您使用 vue-router，您可以“ Hook ”其中一个非常有用的方法，称为 beforeEach。此方法充当一种中间件，并在执行任何给定路由之前运行。

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next();
});