So legen Sie den Titel in VueJS fest

So legen Sie den Titel in vuejs fest: 1. Installieren Sie „vue-wechat-title“ über npm install. 2. Fügen Sie „vue-wechat-title“ in main.js ein. 3. Fügen Sie jede Route in index.js hinzu.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, Dell G3-Computer.

Wie lege ich den Titel in VueJs fest?

vue-Einzelseitentitel-Einstellungstitel

Front-End-Frameworks wie Vue, React usw. sind Einzelseitenanwendungen und das gesamte Web Da es sich bei der Site eigentlich um eine Indexseite handelt, ersetzen Seitensprünge den Inhalt in index.html. Dies unterscheidet sich von der herkömmlichen Praxis, den Titel-Tag auf jeder Seite festzulegen. Vue、React 等都是单页面的应用，整个web站点其实是一个index页面，页面跳转都是替换index.html里边的内容。这与传统的每个页面设置title标签的做法不一样。

推荐使用 vue-wechat-title

vue-wechat-title作用

Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)

已测试APP
微信
QQ
支付宝
淘宝

安装

npm install vue-wechat-title --save

用法

1，在 main.js 中引入

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

2，在路由文件 index.js 中给每个路由添加 title

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

3，在 app.vue 中修改 router-view

Es wird empfohlen, die Funktion „vue-wechat-title“ zu verwenden , der Titel kann das Dokument nicht weitergeben. Ändern Sie das Plug-in nur mit title = xxx, um dieses Problem zu lösen (kompatibel mit Android)

Getestete APP
WeChat
QQ
Alipay
Taobao

Installation

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

Nutzung

1, in main.js Füge

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

2 zu jeder Route in der Routing-Datei-indexjs- hinzu und füge title zu jeder Route in der Routing-Datei <code>index.jshinzu > rrreee

3, ändern Sie router-viewin app.vue > Die Die Standardadresse des benutzerdefinierten geladenen Bildes der Komponente

rrreee lautet ./favicon.ico und kann relativ oder absolut sein rrreeeok! Starten Sie neu und werfen Sie einen Blick darauf🎜🎜Empfohlenes Lernen: „🎜vue-Tutorial🎜“🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie den Titel in VueJS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!