动态更改Vue标题

Question

如何根据页面动态更改页面标题？我有一个页面显示客户的详细信息，因此该页面的页面标题应为“我的客户 - ID1234”。我已经在路由器中成功设置了标题“我的客户”，但我不知道如何为每个页面动态自定义。

在我的 router.js 中：

const routes = [
  { path: '/', name: 'Home', component: Home, meta: { title: "Customer Data Center" } },
  { path: '/customer', name:'customer', component: Customers, meta: { title: "Customers" } },   // This is the part that I want to customize
];

// This callback runs before every route change, including on page load.
router.beforeEach((to, from, next) => {
  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
  if(nearestWithTitle) document.title = nearestWithTitle.meta.title;

  next();
});

我在这个版本上：

"vue": "^2.6.11",
"vue-router": "^3.2.0",

Answer 1

您可以在 created 组件的 Customers 生命周期中更改页面标题。

created: function() {
    document.title = `My Customer - ${customerID}`
}