Heim > Artikel > Web-Frontend > 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
Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)
已测试APP
微信
QQ
支付宝
淘宝
npm install vue-wechat-title --save
main.js
中引入import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)
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: '列表' // 标题设置 } } ] });
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
<router-view v-wechat-title='$route.meta.title'></router-view>
main.js
Füge <p v-wechat-title="$route.meta.title" img-set="/static/logo.png"></p>
title zu jeder Route in der Routing-Datei <code>index.js
hinzu > rrreeerouter-view
in app.vue
> Die Die Standardadresse des benutzerdefinierten geladenen Bildes der Komponente 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!