How to set title in vuejs

How to set title in vuejs: 1. Install "vue-wechat-title" through npm install; 2. Introduce "vue-wechat-title" in main.js; 3. Add it to index.js Just add a title to each route.

The operating environment of this article: Windows 7 system, Vue version 2.9.6, Dell G3 computer.

How to set title in vuejs?

vue single page title setting title

# #Front-end frameworks such as

Vue, React, etc. are single-page applications. The entire web site is actually an index page, and page jumps replace the content in index.html. This is different from the traditional practice of setting the title tag on each page.

It is recommended to use vue-wechat-title

vue-wechat-title function

Vuejs single-page application cannot pass the title in the webview of some APPs under the iOS system This plug-in is only designed to solve this problem by modifying document.title = xxx (compatible with Android)

Tested APP

WeChat
QQ
Alipay
Taobao

Installation

npm install vue-wechat-title --save

Usage

1, introduce

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

2 in main.js

, in the routing file

index.js Add title

// 挂载路由const router =  new Router({
   mode: 'history',
   routes:[
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
            title: '首页'   // 标题设置
          }
        },
        {
          path: '/lists',
          name: 'Lists',
          component: Lists,
          meta: {
            title: '列表'  // 标题设置
          }
        }
     ]
});

3 to each route, and modify the

router-view component

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

in app.vue

The default address of the custom loaded image is ./favicon.ico, which can be relative or absolute

<p v-wechat-title="$route.meta.title" img-set="/static/logo.png"></p>

ok! Restart and take a look

Recommended study: "

vue tutorial"

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