So ändern Sie den Seitentitel in Vue dynamisch

In diesem Artikel wird hauptsächlich die Methode zum dynamischen Ändern des Seitentitels basierend auf Vue-basiertem SPA vorgestellt. Freunde, die es benötigen, können darauf verweisen

Ich habe kürzlich ein SPA-Mobilweb basierend auf VUE erstellt und das gefunden Der Seitentitel kann über document.title=xxxx dynamisch geändert werden. Es ist wirklich schmerzhaft, ihn zu ändern, und es wird gesagt, dass er keine Auswirkungen auf WeChat unter IOS hat. Baidu stellte fest, dass einige zusätzliche Vorgänge für WeChat unter IOS ausgeführt werden müssen, nämlich: Erstellen Sie einen versteckten Iframe, laden Sie dann nach Belieben eine Bilddatei und entfernen Sie sie nach dem Laden, damit der Seitentitel geändert werden kann. Es gibt mehrere Lösungen im Internet:

1. Legen Sie das Titelattribut in App.Vue fest und binden Sie dann den Titel aller Unterkomponenten, um this.$root.data.title=xxxxxNachteile: Das Standard-EL von App.Vue ist nur ein p im Textkörper. Dazu müssen Sie den gesamten HTML-Code

2 binden und das

Vue.directive('title', {
 inserted: function (el, binding) {
 document.title = el.innerText
 el.remove()
 }
})

implementieren Aufrufmethode durch benutzerdefinierte Anweisungen:

<p v-title>标题内容</p>Vorteile: Dies hat einen größeren Grad an Anpassung (wir diskutieren nicht, ob das IOS WeChat-Ende erfolgreich geändert werden kann)

Nachteile: Es kann die nicht erfüllen In einigen JS-Methoden muss der Seitentitel geändert werden. Beispielsweise ist es beim Empfang einer Nachricht erforderlich, den Seitentitel dynamisch anzuzeigen von p

In Bezug auf die beiden oben genannten Methoden im Internet habe ich sie zusammengeführt und das Vue-Plug-In verwendet, um die SPA-Seitentiteländerung zu implementieren:

var plugin={};
plugin.install=function(Vue,options){
 Vue.prototype.$title=function(title){
  document.title=title;
  var iframe=document.createElement("iframe");
  iframe.style.display='none';
  iframe.setAttribute('src','/e.png');
  var loadedCallback=()=>{
   iframe.removeEventListener('load',loadedCallback);
   document.body.removeChild(iframe);
  };
  iframe.addEventListener('load',loadedCallback);
  document.body.appendChild(iframe);
 };
};
module.exports=plugin;

Aufrufmethode:

Natürlich können Sie es durch eine gebundene Variable ersetzen und dann auf die Echtzeitanpassung achten.

this.$title('xxxxxx');

ps: Vue Spa ändert den Titel beim Seitenwechsel Während des Vue-Komponentenentwicklungsprozesses, da es sich um eine einseitige Entwicklung handelt, Manchmal muss der Titel der Seite je nach Situation geändert werden, also habe ich online nachgeschaut und verschiedene Erklärungen gefunden: wo (wo) li (kan) Hu (bu) whistle (dong), also dachte ich an ein schwarzes Technologiedokument. title="xxx";

Erstellen Sie in einem unabhängigen Modul document.title='title', nachdem die Hook-Funktion gestartet wurde. Es heißt jedoch, dass es unter WeChat in IOS ungültig ist Obwohl es mit einem Apple-Computer getestet wurde, habe ich darüber nachgedacht, dass es meine Code-Besessenheit beeinträchtigen wird.

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

Also habe ich ein nützliches Tool vue-wechat-title auf Github gefunden

Installiert durch

npm install vue-wechat-title Führte den erforderlichen Vue-Router und die für die Seite erforderlichen Komponenten ein Dann

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

fügen Sie oben in der Komponente einen Absatz hinzu

<p v-wechat-title="$route.meta.title"></p> Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie Ajax in WordPress

So implementieren Sie eine übergeordnete Komponente, um Daten an eine untergeordnete Komponente in Vue zu übergeben

So implementieren Sie ein Fingergleitkarussell auf Mobilgeräten in js

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Seitentitel in Vue dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!