Comment définir le titre dans vuejs

Comment définir le titre dans vuejs : 1. Installez "vue-wechat-title" via npm install ; 2. Introduisez "vue-wechat-title" dans main.js 3. Ajoutez chaque route dans index.js Juste le titre.

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur Dell G3.

Comment définir le titre dans vuejs ?

vue titre de définition d'une page unique titre

Les frameworks front-end tels que Vue, React, etc. sont des applications d'une seule page, et l'ensemble du Web le site est en fait une page d'index, les sauts de page remplacent le contenu dans index.html. Ceci est différent de la pratique traditionnelle consistant à définir la balise de titre sur chaque page. 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

Il est recommandé d'utiliser vue-wechat-title

fonction vue-wechat-title

Application monopage Vuejs Dans la vue Web de certaines applications sous le système iOS , le titre ne peut pas transmettre le document. Modifiez le plug-in avec title = xxx uniquement pour résoudre ce problème (compatible avec Android)

APP testée
WeChat
QQ
Alipay
Taobao

Installation

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

Utilisation

1, dans main.js Introduisez

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

2 à chaque route dans le fichier de routage-indexjs-, ajoutez title à chaque route dans le fichier de routage <code>index.js rrreee

3, modifiez router-viewdans app.vue > Le l'adresse par défaut de l'image chargée personnalisée du composant rrreee🎜 est ./favicon.ico, qui peut être relative ou absolue 🎜rrreee🎜ok ! Redémarrez et jetez un oeil🎜🎜Apprentissage recommandé : "🎜tutoriel vue🎜"🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!