Cara mengubah suai tajuk halaman dalam vue.js

Cara mengubah suai tajuk halaman dalam vue.js: 1. Tambahkan tajuk pada laluan yang diperlukan dalam fail penghalaan index.js 2. Proseskannya dalam sebelumSetiap pemintas laluan.

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Apabila anda membuka halaman web, halaman web akan mempunyai tajuk lalai Tajuk itu perlu ditukar apabila kami memuatkan kandungan halaman yang berbeza, seperti dari halaman utama ke halaman butiran, dan kemudian dari halaman butiran ke. pusat peribadi, dsb.

Terdapat banyak cara dalam Vue untuk membantu kami mengubah suai tajuk halaman web Kami akan memperkenalkan dua penyelesaian di sini.

Pilihan 1 (tidak disyorkan):

Digabungkan dengan perniagaan, tetapkan nilai terus kepada document.title dalam fungsi kitaran hayat Vue yang dicipta.

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

Pilihan 2 menggunakan Vue-Router's beforeEach interception

Vue Router digunakan dalam projek dan tajuk ditambahkan pada laluan yang diperlukan dalam index.js fail penghalaan.

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
      }
    }
  ]

Diproses sebelumSetiap pemintas laluan

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

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Cara mengubah suai tajuk halaman dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!