Change the Vue title dynamically

user_2155584 0
Viewed 462

How do I change the page title dynamically based on the page? I have a page showing customer's details, so the page title for this page should be "My Customer - ID1234". I've successfully set the title "My Customer" in the router, but I have no idea how to customize for each page dynamically.

In my 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();
});

I'm on this version:

"vue": "^2.6.11",
"vue-router": "^3.2.0",
vue.js javascript
1 Answers

You can change the page title on created life cycle of Customers component.

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