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