vue.js修改頁(yè)面標(biāo)題的方法：1、在路由文件index.js中給需要的路由添加title；2、在路由的beforeEach攔截器中進(jìn)行處理即可。

本文操作環(huán)境：windows10系統(tǒng)、vue.js 2.9、thinkpad t480電腦。

在打開一個(gè)網(wǎng)頁(yè)的時(shí)候，網(wǎng)頁(yè)會(huì)有一個(gè)默認(rèn)的標(biāo)題，當(dāng)我們加載不同的頁(yè)面內(nèi)容時(shí)標(biāo)題需要進(jìn)行改變，例如從首頁(yè)到詳情頁(yè)，再?gòu)脑斍轫?yè)到個(gè)人中心等。

vue中有很多種方式來幫助我們修改網(wǎng)頁(yè)標(biāo)題，我們這里介紹下兩種方案。

方案一（不推薦）：

結(jié)合業(yè)務(wù)直接在Vue生命周期函數(shù) created 中，給 document.title賦值。

<script> import axios from 'axios' export default {   created () {     document.title = '功能授權(quán)'   } } </script>

方案二使用Vue-Router的beforeEach攔截

項(xiàng)目中使用了Vue Router，在路由文件 index.js 中給需要的路由添加 title。

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

在路由的beforeEach 攔截器里處理

router.beforeEach((to, from, next) => {   /* 路由發(fā)生變化修改頁(yè)面title */   if (to.meta.title) {     document.title = to.meta.title   } })

推薦學(xué)習(xí)：php培訓(xùn)