Vue Router 如何动态设置 meta 中的 title 值?

4,557 阅读1分钟
// router/index.js
{
  name: "create",
  path: "data/create/:id",
  component: () =>
    import(
        "@/views/data/createOrEdit/index"
    ),
  meta: {
    title: "新增",
  },
},

在新增和修改的时候使用了同一个组件,需要显示对应的是新增还是修改,不知道如何动态设置。

解决方法:使用 beforeEnter

{
  name: "create",
  path: "data/create/:id",
  beforeEnter: (to, from, next) => {
    // 根据自己业务判断
    if (from.meta) {
      to.meta.title = '修改';
    }
    next();
  },
  component: () =>
    import(
        "@/views/data/createOrEdit/index"
    ),
  meta: {
    title: "新增",
  },
},

参考资料