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

原文連接

前言

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

開始

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

需求分析

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

實踐

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

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

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

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

iView-admin究竟是怎樣處理路由的呢?這些導航數據又是從哪裏來的呢?

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

路由

能夠看到在全部的路由跳轉以前,已經使用函數進行過處理了,而全局的router.beforeEach()是優先於頁面中的beforeRouterEnter()的,因此咱們以前所作的處理無效。 router

 

 先不急着看src/libs/utils.js,咱們先看看頁面中的麪包屑導航的值以及標籤頁中的值是從哪裏來的。htm

組件

 麪包屑導航

數據

組件

標籤頁

標籤頁數據

標籤頁組件

看完組件,咱們如今來看看src/libs/util.js中到底有啥吧~

設置麪包屑導航的值:

設置麪包屑

設置標籤頁:

設置標籤頁

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

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

頁面設置

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

添加

總結

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

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

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

噓寒問暖 不如打筆鉅款~

相關文章
相關標籤/搜索