How to dynamically modify browser tab names in Vue projects

Vue is a popular front-end development framework, and its use is becoming more and more widespread. In the Vue project, modifying the name of the browser tab is a common requirement. This article will introduce how to dynamically modify the name of the browser tab in the Vue project.

In the Vue project, we can modify the name of the browser tab by modifying the title attribute of the page component. The following is a simple example:

<template>
  <div>
    <h1>欢迎来到我的博客</h1>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  mounted() {
    document.title = '我的博客'
  }
}
</script>

In the above code, we set the document.title attribute to "My Blog" in the mounted life cycle function of the component, so that when the user visits this page, browse The name of the browser tab will change to "My Blog."

If we want the browser tab name of each page to be different, we can put the code for setting the browser tab name into the router, for example:

<template>
  <div>
    <h1>欢迎来到{{pageTitle}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Blog',
  computed: {
    pageTitle() {
      return this.$route.meta.title
    }
  },
  mounted() {
    document.title = this.pageTitle
  }
}
</script>

In the above In the code, we obtain the $route.meta.title property from the computed property of the component, bind it to {{pageTitle}} in the template, and finally set the document.title property in the mounted life cycle function. is pageTitle. In this way, the browser tab name of each page will dynamically change according to the $route.meta.title attribute.

If we need to dynamically modify the browser tab name in Vuex, we can use Vue's global guard function beforeEach to dynamically modify the browser tab name before routing switching. For example:

import router from './router'

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

In the above code, we registered a global front guard beforeEach, which is used to modify the browser tab name before routing switching. In the beforeEach function, we set the document.title attribute to the meta.title attribute of the upcoming page (to). In this way, the browser tab name will change dynamically every time the route is switched.

Summary

In the Vue project, there are some different ways to dynamically modify the browser tab name. You can choose to use different methods according to different needs. No matter which method is used, it can help us better optimize the user experience and improve the user's impression of the website.

The above is the detailed content of How to dynamically modify browser tab names in Vue projects. For more information, please follow other related articles on the PHP Chinese website!