Home > Web Front-end > JS Tutorial > body text

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

小云云
Release: 2017-12-23 10:17:21
Original
2352 people have browsed it

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
Copy after login

In main.js Introduce the plug-in



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

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:'详情页' // 标题设置在这里
  }
 }]
Copy after login

Modify the router-view component in app.vue



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

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 html 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!