說說 vue-router 組件的高級應用

1 動態(tài)設置頁面標題

頁面標題是由 <title></title> 來控制的,因為 SPA 只有一個 HTML挂签,所以當切換到不同的頁面時疤祭,標題是不會發(fā)生變化的。必須通過 JavaScript 來修改 <title></title> 中的內容:

window.document.title ='xxx'

有一種思路是在每個頁面的 *.vue 的 mounted 鉤子函數中饵婆,通過 JavaScript 來修改 <title></title> 中的內容勺馆。這種方式固然可行,但如果頁面很多,就會顯著增加維護成本草穆,而且修改邏輯都是一樣的灌灾。有沒有更好的方法呢?

我們可以利用 vue-router 組件的導航鉤子 beforeEach 函數悲柱,在路由發(fā)生變化時锋喜,統(tǒng)一設置。

import VueRouter from 'vue-router';
...

//加載 vue-router 插件
Vue.use(VueRouter);

/*定義路由匹配表*/
const Routers = [{
    path: '/index',
    component: (resolve) => require(['./router/views/index.vue'], resolve),
    meta: {
        title: '首頁'
    }
},
    //一次性加載
    // {
    //     path: '/index',
    //     component: require('./router/views/index.vue')
    // },
    {
        path: '/about',
        component: (resolve) => require(['./router/views/about.vue'], resolve),
        meta: {
            title: '關于'
        }
    },
    {
        path: '/article/:id',
        component: (resolve) => require(['./router/views/article.vue'], resolve)
    }
    ,
    {//當訪問的頁面不存在時豌鸡,重定向到首頁
        path: '*',
        redirect: '/index'
    }
]

//路由配置
const RouterConfig = {
    //使用 HTML5 的 History 路由模式
    mode: 'history',
    routes: Routers
};
//路由實例
const router = new VueRouter(RouterConfig);

//動態(tài)設置頁面標題
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
})

new Vue({
    el: '#app',
    router: router,
    render: h => h(Hello)
})

我們在路由匹配表中嘿般,為那些需要標題的頁面,配置了 meta title 屬性:

meta: {
        title: 'xxx'
}

然后在 beforeEach 導航鉤子函數中直颅,從路由對象中獲取 meta title 屬性博个,用于標題設置。beforeEach 有三個入參:

參數 說明
to 當前導航功偿,即將要進入的路由對象盆佣。
from 當前導航,即將要離開的路由對象械荷。
next 調用 next() 之后共耍,才會進入下一步。

效果:

2 長頁面跳轉自動返回頂端

假設第一個頁面較長吨瞎,用戶滾動查看到底部痹兜,這時如果又跳轉到另一個頁面,那么滾動條是會默認停在上一個頁面的所在位置的颤诀。這種場景比較好的設計是:跳轉后會自動返回頂端字旭。這可以通過 afterEach 鉤子函數來實現,代碼如下:

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

組合使用 beforeEach 與 afterEach崖叫,還可以實現:從一個頁面跳轉到另一個頁面時遗淳,出現 Loading 動畫,當新頁面加載后心傀,再結束動畫屈暗。

3 登陸驗證

某些頁面設置了權限,只有賬號登陸過脂男,才能訪問养叛;否則跳轉到登錄頁。假設我們使用 localStorage 來判斷是否登陸宰翅。

HTML5 的 localStorage 特性弃甥,用于本地存儲。它的出現汁讼,解決了 cookie 存儲空間不足的問題 cookie 中每條 cookie 的存儲空間只有 4k) 潘飘,而 localStorage 中一般是 5M肮之,這在不同的瀏覽器中 大小略有不同 。

router.beforeEach((to, from, next) => {
    if (window.localStorage.getItem('token')) {
        next();
    } else {
        next('/login');
    }
});

next() 入參卜录,如果是 false戈擒,會不導航;如果為路徑艰毒,則會導航到指定路徑下的頁面筐高。

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市丑瞧,隨后出現的幾起案子柑土,更是在濱河造成了極大的恐慌,老刑警劉巖绊汹,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件稽屏,死亡現場離奇詭異,居然都是意外死亡西乖,警方通過查閱死者的電腦和手機狐榔,發(fā)現死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來获雕,“玉大人薄腻,你說我怎么就攤上這事〗彀福” “怎么了庵楷?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長楣颠。 經常有香客問我尽纽,道長,這世上最難降的妖魔是什么童漩? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任弄贿,我火速辦了婚禮,結果婚禮上睁冬,老公的妹妹穿的比我還像新娘。我一直安慰自己看疙,他們只是感情好豆拨,可當我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著能庆,像睡著了一般施禾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搁胆,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天弥搞,我揣著相機與錄音邮绿,去河邊找鬼。 笑死攀例,一個胖子當著我的面吹牛船逮,可吹牛的內容都是我干的。 我是一名探鬼主播粤铭,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼挖胃,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了梆惯?” 一聲冷哼從身側響起酱鸭,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垛吗,沒想到半個月后凹髓,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡怯屉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年蔚舀,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚀之。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蝗敢,死狀恐怖,靈堂內的尸體忽然破棺而出足删,到底是詐尸還是另有隱情寿谴,我是刑警寧澤,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布失受,位于F島的核電站讶泰,受9級特大地震影響,放射性物質發(fā)生泄漏拂到。R本人自食惡果不足惜痪署,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望兄旬。 院中可真熱鬧狼犯,春花似錦、人聲如沸领铐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绪撵。三九已至瓢姻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間音诈,已是汗流浹背幻碱。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工绎狭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人褥傍。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓儡嘶,卻偏偏與公主長得像,于是被迫代替她去往敵國和親摔桦。 傳聞我的和親對象是個殘疾皇子社付,可洞房花燭夜當晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內容

  • VUE Vue :數據驅動的M V Vm框架 m :model(后臺提供數據),v :view(頁面)邻耕,vM(模板...
    wudongyu閱讀 5,401評論 0 11
  • 本文首發(fā)于TalkingCoder鸥咖,一個有逼格的程序員社區(qū)。轉載請注明出處和作者兄世。 寫在前面 本文為系列文章啼辣,總共...
    Aresn閱讀 9,524評論 0 42
  • 前言 vue-router是什么:是vue.js官方的路由管理器和vue.js的核心深度的集成,讓開發(fā)者更加簡單的...
    GUAN_one閱讀 3,711評論 0 2
  • 一:什么是閉包御滩?閉包的用處鸥拧? (1)閉包就是能夠讀取其他函數內部變量的函數。在本質上削解,閉包就 是將函數內部和函數外...
    xuguibin閱讀 9,612評論 1 52
  • 首先拋出這樣一個問題富弦,vue-router是用來做什么的? 這里不著急回答氛驮,也不準備在這篇文章里回答腕柜。這篇文章僅總...
    1263536889閱讀 627評論 0 2