Use vue-router to configure your own title for each route

Traditional method

In the past, in single page routing, I could only set a fixed website title in the html file. If you want to modify it dynamically, you need to use the following method.

= 'This is a title';

This will make us do a lot of useless work. Looks very stupid.

How to use Vue-Router

First open the /src/router/ file.

Find the following code.

const vueRouter = new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active-link',
  linkExactActiveClass: 'exact-active-link',
  scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
    return savedPosition;
   } else {
    return { x: 0, y: 0 };
   }
  },
 });

vueRouter is just a variable name. What you call can be found according to the name of your own project. As long as it is an object instantiated by Router, it will be OK. Then replace the above code with the following code.

const vueRouter = new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active-link',
  linkExactActiveClass: 'exact-active-link',
  scrollBehavior (to, from, savedPosition) {
   if (savedPosition) {
    return savedPosition;
   } else {
    return { x: 0, y: 0 };
   }
  },
 });
 ((to, from, next) => {
  /* Change the route page title */
  if () {
    = ;
  }
  next();
 });

The logic of the code is to use traditional methods to modify the title of each route to which it is about to jump.

Configure routing

After the configuration is complete, we need to configure our own title for each router. For example.

{
 path: '/',
 name: 'Home',
 component: () => import('@/views/Home/Home'),
 meta: {
  title: 'front page',
 },
}

Add an attribute called meta to each route. The attribute in the meta attribute is called title, which is the title unique to each route. After that, each route in the browser will have its own set title.

Summarize

The above is what the editor introduced to you using vue-router to configure their own title for each route. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!