vue如何動(dòng)態(tài)修改meta的title
如何動(dòng)態(tài)修改meta的title
需求：不去掉原生導(dǎo)航欄的情況下實(shí)現(xiàn)詳情頁(yè)的動(dòng)態(tài)title（列表頁(yè)query攜帶參數(shù)name到詳情頁(yè)實(shí)現(xiàn)動(dòng)態(tài)title）
@on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})"列表頁(yè)點(diǎn)擊攜帶name到詳情頁(yè)職位詳情頁(yè)的title,并且賦值給router里面的meta的title，然后綁定到原生的document.title上！
created(){
this.category_id = this.$route.query.id;//列表的詳情id
this.$route.meta.title = this.$route.query.name;//列表的名稱
document.title = this.$route.meta.title;
}注意：一開(kāi)始的邏輯是直接拿到name賦值到原生document.title上！但是這樣路由跳轉(zhuǎn)可能會(huì)有meta的title會(huì)出現(xiàn)空值的狀態(tài)，需要點(diǎn)擊兩次才出現(xiàn)頁(yè)面的動(dòng)態(tài)title，如果點(diǎn)擊第二次會(huì)出現(xiàn)上一次的title，因?yàn)榈诙蔚狞c(diǎn)擊沒(méi)有經(jīng)過(guò)router.js！
router.afterEach((to, from, next) => {
if (to.path === '/yunCrm' && to.query.name) {
to.meta.title = to.query.name;
document.title = to.meta.title;
}
});router.js里面需要實(shí)現(xiàn)路由的判斷，因?yàn)轫?yè)面的title值最終的是顯示的是meta里面的title，而不是query攜帶過(guò)來(lái)的name，有點(diǎn)繞，一開(kāi)始是直接賦值，但是會(huì)出現(xiàn)空值現(xiàn)象，也感謝朋友的幫助與提醒?。。?/p>
注：首先得使用to.query.name來(lái)接收列表頁(yè)傳來(lái)的真實(shí)值再賦值給最終顯示的to.meta.title??！
動(dòng)態(tài)修改路由的meta.title
需求
從一級(jí)頁(yè)面跳轉(zhuǎn)到多個(gè)二級(jí)頁(yè)面，發(fā)現(xiàn)二級(jí)頁(yè)面大體相同，只有面包屑的title不一樣
解決辦法
在二級(jí)頁(yè)面使用beforeRouteEnter查看從那個(gè)按鈕跳轉(zhuǎn)過(guò)來(lái)
一級(jí)頁(yè)面：index.vue
// 批量啟用\批量停用操作
toPage(item) {
this.$router.push({path: '/equipment/distribute/batch',query: {type: item}})
},二級(jí)頁(yè)面：batch.vue
beforeRouteEnter:(to,from,next) => {
if(to.query.type == 'start') {
to.meta.title = '批量啟用'
}else if(to.query.type == 'stop') {
to.meta.title = '批量停用'
}
next()
console.log(to,'tttt')
},以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載
下拉框一開(kāi)始請(qǐng)求第一頁(yè)的內(nèi)容,滾動(dòng)到最后的時(shí)候,請(qǐng)求第二頁(yè)的內(nèi)容,如此反復(fù),直到所有數(shù)據(jù)加載完成,這篇文章主要介紹了vue3如何利用自定義指令實(shí)現(xiàn)下拉框分頁(yè)懶加載,需要的朋友可以參考下2024-07-07
laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼
本篇文章主要介紹了laravel5.4+vue+element簡(jiǎn)單搭建的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤(pán)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤(pán)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
uniapp仿微信聊天界面效果實(shí)例(vue3組合式版本)
這篇文章主要介紹了uniapp仿微信聊天界面的相關(guān)資料,這里提及了一個(gè)時(shí)間工具包timeMethod.js,該工具包可能提供了一系列時(shí)間處理的功能,如格式化日期、計(jì)算時(shí)間差等,以便在消息格式中正確展示時(shí)間信息,使用此類工具包可以大大提高開(kāi)發(fā)效率,需要的朋友可以參考下2024-10-10
Vue3 setup語(yǔ)法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)
這篇文章主要給大家介紹了關(guān)于Vue3 setup語(yǔ)法糖銷毀一個(gè)或多個(gè)定時(shí)器(setTimeout/setInterval)的相關(guān)資料,vue是單頁(yè)面應(yīng)用,路由切換后,定時(shí)器并不會(huì)自動(dòng)關(guān)閉,需要手動(dòng)清除,當(dāng)頁(yè)面被銷毀時(shí),清除定時(shí)器即可,需要的朋友可以參考下2023-10-10
基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新
這篇文章主要為大家詳細(xì)介紹了如何基于electron+vue3+ts搭建桌面端應(yīng)用并且可以熱更新,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考下2023-10-10
導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過(guò)程中的一些鉤子函數(shù)，這個(gè)過(guò)程中觸發(fā)的這些函數(shù)能讓你有操作一些其他的事兒的時(shí)機(jī)，這就是導(dǎo)航守衛(wèi)，守衛(wèi)適用于切面編程，即把一件事切成好幾塊，然后分給不同的人去完成，提高工作效率，也可以讓代碼變得更加優(yōu)雅2022-09-09
本文主要介紹了Vue打包后頁(yè)面出現(xiàn)空白解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個(gè)文件/文件夾，代碼很簡(jiǎn)單，對(duì)vue3拖拽上傳功能感興趣的朋友一起看看吧2022-10-10
Vue兩個(gè)通信方式與動(dòng)畫(huà)過(guò)度及混入使用介紹
最近在寫(xiě)vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫(huà)不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下2023-03-03