Briefly understand how to set the web page title on a vue2 single page

Front-end frameworks such as Vue, React, etc. are single-page applications, which means that the entire web site is actually an index page. The so-called page jumps replace the content in index.html, and the title of the page is It is only set once when each page is initialized. For the current front-end framework, the traditional method of setting the title tag on each page is not feasible. This article mainly introduces how to set the web page title on a single page in vue2. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help everyone.

It is recommended to use the vue-wechat-title plug-in

Download and install the plug-in dependencies

##

npm install vue-wechat-title --save

In main.js Introduce the plug-in

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

Add title to each route in the routing file index.js

 routes: [{
  path: '/',
  name: 'index',
  component: index,
  meta:{
    title:'首页' // 标题设置在这里
  }
 },{
  path:'/detail',
  name:'detail',
  component:detail,
  meta:{
    title:'详情页' // 标题设置在这里
  }
 }]

Modify the router-view component in app.vue

<router-view v-wechat-title=&#39;$route.meta.title&#39;></router-view>

Restart and try, it works

Related recommendations ：

Detailed explanation of how to change the title of the web page when the focus is lost

Add an icon to the htmlb2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f tag, web page The logo icon of the webpage is displayed on the left side of the title

JS realizes the super simple webpage title running and flashing prompt effect code_javascript skills

The above is the detailed content of Briefly understand how to set the web page title on a vue2 single page. For more information, please follow other related articles on the PHP Chinese website!