Javascript 动态更改Vue标题
如何根据页面动态更改页面标题?我有一个显示客户详细信息的页面,因此此页面的页面标题应为“我的客户-ID1234”。我已经成功地在路由器中设置了标题“我的客户”,但我不知道如何为每个页面动态定制 在my router.js中:Javascript 动态更改Vue标题,javascript,vue.js,Javascript,Vue.js,如何根据页面动态更改页面标题?我有一个显示客户详细信息的页面,因此此页面的页面标题应为“我的客户-ID1234”。我已经成功地在路由器中设置了标题“我的客户”,但我不知道如何为每个页面动态定制 在my router.js中: const routes = [ { path: '/', name: 'Home', component: Home, meta: { title: "Customer Data Center" } }, { path: '/customer'
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",
您可以在
客户的组件的创建的生命周期上更改页面标题
created: function() {
document.title = `My Customer - ${customerID}`
}
您可以使用Vue meta来完成此操作