So ändern Sie den Seitentitel in vue.js

So ändern Sie den Seitentitel in vue.js: 1. Fügen Sie den Titel zur erforderlichen Route in der Routing-Datei index.js hinzu. 2. Verarbeiten Sie ihn im beforeEach-Interceptor der Route.

Die Betriebsumgebung dieses Artikels: Windows10-System, vue.js 2.9, Thinkpad T480-Computer.

Beim Öffnen einer Webseite hat die Webseite einen Standardtitel. Wenn wir andere Seiteninhalte laden, muss der Titel geändert werden, z. B. von der Startseite zur Detailseite und dann von der Detailseite zum persönlichen Zentrum. usw.

Es gibt viele Möglichkeiten in Vue, uns dabei zu helfen, den Titel der Webseite zu ändern. Wir werden hier zwei Lösungen vorstellen.

Option 1 (nicht empfohlen):

In Kombination mit dem Unternehmen direkt einen Wert zu document.title in der erstellten Vue-Lebenszyklusfunktion zuweisen.

<script>
import axios from &#39;axios&#39;
export default {
  created () {
    document.title = &#39;功能授权&#39;
  }
}
</script>

Option 2 verwendet Vue-Router vor jeder Interception

Vue Router wird im Projekt verwendet und der Titel wird der erforderlichen Route in der Routing-Datei index.js hinzugefügt.

routes: [{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
        title: '首页',
        keepAlive: true
      }
    },
    {
      path: '/person/auth,
      name: 'personAuth',
      component: () => import('@/pages/person/auth),
      meta:{
        title: '个人中心',
        keepAlive: false
      }
    }
  ]

Verarbeitet im beforeEach Interceptor der Route

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

Empfohlenes Lernen: php-Training

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