大家好，我來(lái)了，本期為大家?guī)?lái)的前端開發(fā)知識(shí)是”Web前端：Vue路由進(jìn)階配置“，有興趣做前端的朋友，和我一起來(lái)看看吧！

1. 頁(yè)面打開權(quán)限流程

頁(yè)面是否能打開有以下兩點(diǎn)判斷：

1. 判斷是否增加登陸的判斷

a)True：進(jìn)入判斷是否有登陸的流程

b)False：直接頁(yè)面頁(yè)面

2. 根據(jù)登陸判斷，判斷是否已經(jīng)登陸成功或者失敗

a)判斷是否已經(jīng)登陸，如果登陸則進(jìn)入頁(yè)面

b)判斷是否已經(jīng)登陸，如果未登錄則進(jìn)入登陸頁(yè)面

2. 過(guò)渡動(dòng)效

<router-view> 是基本的動(dòng)態(tài)組件，所以我們可以用 <transition> 組件給它添加一些過(guò)渡效果：

3. 數(shù)據(jù)獲取

有時(shí)候，進(jìn)入某個(gè)路由后，需要從服務(wù)器獲取數(shù)據(jù)。例如，在渲染用戶信息時(shí)，你需要從服務(wù)器獲取用戶的數(shù)據(jù)。我們可以通過(guò)兩種方式來(lái)實(shí)現(xiàn)：

1.導(dǎo)航完成之后獲取

先完成導(dǎo)航，然后在接下來(lái)的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示“加載中”之類的指示。

2.導(dǎo)航完成之前獲

導(dǎo)航完成前，在路由進(jìn)入的守衛(wèi)中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。

從技術(shù)角度講，兩種方式都不錯(cuò) —— 就看你想要的用戶體驗(yàn)是哪種。

滾動(dòng)行為

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

注意: 這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。

路由懶加載

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問(wèn)的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

結(jié)合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。

首先，可以將異步組件定義為返回一個(gè) Promise 的工廠函數(shù) (該函數(shù)返回的 Promise 應(yīng)該 resolve 組件本身)：

第二，在 Webpack 2 中，我們可以使用動(dòng)態(tài) import語(yǔ)法來(lái)定義代碼分塊點(diǎn) (split point)：

把組件按組分塊

有時(shí)候我們想把某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中。只需要使用 命名 chunk，一個(gè)特殊的注釋語(yǔ)法來(lái)提供 chunk name (需要 Webpack > 2.4)。

Webpack 會(huì)將任何一個(gè)異步模塊與相同的塊名稱組合到相同的異步塊中。

登陸注冊(cè)完整流程

1.開發(fā)場(chǎng)景描述：

我們?cè)谡鎸?shí)的開發(fā)中，有一種情況是如下，項(xiàng)目是從零開始的，此時(shí)后臺(tái)與前臺(tái)是同時(shí)開發(fā)，前臺(tái)在開發(fā)的時(shí)候，由于后臺(tái)也是剛剛開始的，所以我們需要自己去模擬數(shù)據(jù)，以前我們接觸過(guò)此種方式，叫Mock。在外面的Vue中，同樣可以實(shí)現(xiàn)mock的操作模擬數(shù)據(jù)

JSON Web Token 入門教程

http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html

后臺(tái)生成token

本次為大家?guī)?lái)的前端文章內(nèi)容”Web前端：Vue路由進(jìn)階配置“到此結(jié)束了，對(duì)前端開發(fā)有興趣的朋友，關(guān)注我，我們下期再見(jiàn)！

總結(jié)

以上是生活随笔為你收集整理的redirect路由配置 vue_Web前端：Vue路由进阶配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。