挖坑指南:iView-admin動態配置route.meta.title


原文鏈接

前言

新的項目,基於iView-admin。結合自身的項目需求,對官方的模板進行一些修改。以達到動態修改route.meta,並同步更新面包屑導航文字和標簽頁標題。

開始

如果你還未使用過iView-admin或者正在上路,那我們先來看看項目的需求以及遇到的問題。

需求分析

那應該如何解決這個問題呢?

實踐

方法一:一開始想到的方法,就是在新建頁面的created()中,通過this.$route.params的不同參數判斷當前是何種操作,根據判斷修改this.$route.meta.title的值。

結果:面包屑導航的值會在下一次跳轉中生效,標簽頁的title始終無效。

方法二:created()不行,那在beforeRouterEnter()中試試。

結果:與方法一相同,面包屑導航的值會在下一次跳轉中生效,標簽頁的title始終無效。

iView-admin到底是怎樣處理路由的呢?這些導航數據又是從哪里來的呢?

首頁,找到src/router/index.js

路由

可以看到在所有的路由跳轉之前,已經使用函數進行過處理了,而全局的router.beforeEach()是優先於頁面中的beforeRouterEnter()的,所以我們之前所做的處理無效。 

 

 先不急着看src/libs/utils.js,我們先看看頁面中的面包屑導航的值以及標簽頁中的值是從哪里來的。

組件

 面包屑導航

數據

組件

標簽頁

標簽頁數據

標簽頁組件

看完組件,我們現在來看看src/libs/util.js中到底有啥吧~

設置面包屑導航的值:

設置面包屑

設置標簽頁:

設置標簽頁

放寬相同路由判斷的條件:

放寬條件 
在路由跳轉前,動態修改meta.title的值:

頁面設置

大工告成~來來看一看效果:

添加

總結

首先要在路由的配置文件中,設置noCache禁止組件緩存。 

其次,不知道還有什么大坑在等着我。這種第三方的框架,本身就無法適應多變的業務需求,所以要自己學會看代碼,找代碼。

路漫漫其修遠兮,吾將上下而求索~

噓寒問暖 不如打筆巨款~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM