How to modify the page title in vue.js

How to modify the page title in vue.js: 1. Add title to the required route in the routing file index.js; 2. Process it in the beforeEach interceptor of the route.

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

When opening a web page, the web page will have a default title. When we load different page content, the title needs to be changed, such as from the home page to the details page, and then from the details page to the personal center, etc.

There are many ways in vue to help us modify the title of the web page. We will introduce two options here.

Option 1 (not recommended):

Assign a value to document.title directly in the Vue life cycle function created in combination with the business.

<script>
import axios from &#39;axios&#39;
export default {
  created () {
    document.title = &#39;功能授权&#39;
  }
}
</script>

Option 2 uses Vue-Router's beforeEach interception

The Vue Router is used in the project, and the title is added to the required route in the routing file index.js.

routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/person/auth,
      name: 'personAuth',
      component: () => import('@/pages/person/auth),
      meta:{
        title: '个人中心',
        keepAlive: false
      }
    }
  ]

Processed in the beforeEach interceptor of the route

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

Recommended learning: php training

The above is the detailed content of How to modify the page title in vue.js. For more information, please follow other related articles on the PHP Chinese website!