vue二級路由，傳參，#，全局或局部路由訪問，安裝SASS，手機效果，.staging@詩書畫唱
本期又是干貨滿滿的一篇專欄，寫這種專欄，真的十分花時間，今天我就是中午一吃完飯后開始寫這篇專欄，寫到23：00左右。我的作品最近都沒有上很多推薦，求大家等等點贊，投幣，收藏（也就是“三連”）等等，讓我獲得更多的推薦！讓我至少有些微薄的收益，謝謝大家的支持！
目錄：
例子1：實現(xiàn)二級路由
個人認(rèn)為App.vue中的<router-view/>就是與router文件夾中index.js配置路由（訪問路徑）中有關(guān)的一級路由，npm run dev運行后，這個<router-view/>會根據(jù)一級路由訪問路徑的不同變成對應(yīng)的訪問路徑的組件。
個人理解：當(dāng)你在router文件夾中index.js配置一級路由后，如果訪問對應(yīng)的訪問路徑后切換到一個組件，導(dǎo)航條<tabbar/>部分不變，再點擊這個組件的切換組件的超鏈接等等，再訪問的路徑一般是二級路由的訪問路徑
設(shè)置二級路由時要用children這個數(shù)組，同時設(shè)置二級路由是有2種方法的，如下圖所示
也可以再加<router-view/>,在children數(shù)組的path路徑中再加個“/vue組件文件名前綴”，這樣就可以設(shè)置三級路由，更多級的路由可以依次類推
用redirect重定向?qū)崿F(xiàn)，訪問某個一級路由的訪問路徑時，默認(rèn)"跳轉(zhuǎn)"(切換組件）到某個二級路由的訪問路徑的方法
個人理解<li v-for="data in dataList"? :key="data">{{data}}</li>的意思其實是把dataList遍歷出dataList.length個數(shù)據(jù)動態(tài)變量data?，同時生成dataList.length個以動態(tài)變量data為文本內(nèi)容的<li></li>.?:key="data"是 v-bind:key="data"的縮寫，是動態(tài)綁定地設(shè)置key。
個人理解：用this.$router.push('/(router文件夾中路由配置的path的內(nèi)容，一般我習(xí)慣是設(shè)置為首字母大寫或小寫的要切換到的組件名)‘）實現(xiàn)觸發(fā)綁定的點擊事件后，觸發(fā)的methods中的有頁面跳轉(zhuǎn)功能的viewDatail函數(shù)。
如果想實現(xiàn)傳參，可以把點擊事件觸發(fā)的函數(shù)viewDetail()改寫成viewDetail(data)，這樣觸發(fā)點擊事件時，也會傳參。同時viewDetail()里面的this.$router.push('/XXX‘）可以改寫成用了模板字符串的this.$router.push(`/XXX/${對應(yīng)的傳的參數(shù)名}`）
獲取地址欄中傳過來的參數(shù)名的內(nèi)容，其實也很簡單，我前面的專欄中講過，用動態(tài)傳參，即用{{$route.params.n}}(n是自定義的，n是在router文件夾中設(shè)置路由的path的內(nèi)容中的’detail/:n'的n）
當(dāng)然了，{{$route.params.n}}是在寫HTML代碼的<template></template>中寫的，但是在
寫js代碼的export default中的mouted等自己想用的方法中可以通過this.$route.params.n的方式獲取到地址欄傳過來的參數(shù)的內(nèi)容。
個人認(rèn)為：呃，其實還有種傳參的方法就是路由配置的name屬性傳參，其實和上面的動態(tài)傳參差不多，就是寫發(fā)不同，無非就是把模板字符串的this.$router.push(`/XXX/${對應(yīng)的傳的參數(shù)名}`）改寫成了this.$router.push({name:'dl',params:{n:name,id:1}}）等等,name:'dl‘要在對應(yīng)的路由配置中寫上可以傳多個參數(shù)，更方便，我一般習(xí)慣用這種方法傳參，前面我寫的專欄中應(yīng)該講過，忘了的讀者可以看我前面的專欄，并且給我個三連。
如果訪問路徑中有#，是因為我們在router文件夾中的index.js文件中的routes中沒有聲明mode:history,
就會默認(rèn)產(chǎn)生mode:hash（hash就是符號#的意思），你在routes中聲明mode:history，輸入訪問路徑時就不會出現(xiàn)#（我個人習(xí)慣不去除#，#就是區(qū)分請求路徑的，有時可以防止404界面的出現(xiàn)，如果說你聲明mode:history，美化了訪問路徑，但訪問路徑若是不存在，可能真的訪問其后臺路徑等等，那么就容易報404，這樣不美觀。一般如果訪問一個不存在的路徑時，會跳轉(zhuǎn)我們設(shè)置的一個美觀的提示該路徑不存在的頁面。如果可能出現(xiàn)404，且如果你是前端工程師等等，就要和負(fù)責(zé)后臺的人員商量，設(shè)置一個當(dāng)訪問一個不存在的路徑時，會跳轉(zhuǎn)到的美觀的提示該路徑不存在的頁面）
hash
個人理解：下面是實現(xiàn)全局路由守衛(wèi)的簡單例子，其實我認(rèn)為全局路由守衛(wèi)類似于Java中的
全局的過濾器等等，全局路由守衛(wèi)等的代碼是在我們訪問某個路徑時會先執(zhí)行的代碼，可以實現(xiàn)的功能為：若你想訪問個人中心界面，那么訪問個人中心路徑前會先執(zhí)行全局路由守衛(wèi)的代碼，判斷你是否登錄了，發(fā)現(xiàn)你沒有登錄就用next('/XXX')之類強制讓你跳轉(zhuǎn)到登錄界面等等（個人理解：next('/XXX')中的XXX就是router文件夾中的路由設(shè)置中的對應(yīng)組件的path對應(yīng)的值（或說是path對應(yīng)的內(nèi)容））。如果你登錄了，那么就允許你訪問個人中心界面。to.path就是你要訪問的界面的路徑。beforeEach也是鉤子函數(shù)。
在下圖中的實現(xiàn)點擊個人中心的超鏈接時會跳轉(zhuǎn)到登錄界面（當(dāng)然，這里的if判斷等等內(nèi)容要根據(jù)自己的需求，自己加上）的局部路由訪問的例子中用到了beforeRouterEnter，beforeRouterEnter也是鉤子函數(shù)。
代碼
基本代碼見https://www.bilibili.com/read/cv11382966我是以此文中的文件的代碼為基礎(chǔ)來寫的代碼，下面我只展示我做了改動或新增了的文件的代碼部分。
Comingsoon.vue
Nowplaying.vue
Center.vue
Film.vue
Login.vue
例子2：vue中的SASS的安裝（有時要注意cmd命令下載SASS，要用@指定適當(dāng)?shù)腟ASS版本的問題等等）
例子1：實現(xiàn)二級路由
第一階段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被設(shè)置為true,那么在編譯時會報eslint錯誤
修改package.json文件中的""lint""為 ""eslint --fix --ext .js,.vue src"",
運行npm run lint，會自動修復(fù)所有的eslint錯誤
那么再執(zhí)行npm run dev時就不會報錯了"
"2、npm run build打包命令：
會自動生成dist文件，將dist文件夾中的內(nèi)容部署到后臺程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導(dǎo)航欄
5、配置歡迎頁面
6、高亮顯示
7、二級路由配置
8、路由傳參和name屬性傳參
9、去掉路徑的#
10、路由守衛(wèi):全局路由守衛(wèi)和局部路由守衛(wèi)
第二階段
"1、添加sass支持：--verbose顯示安裝的詳細(xì)信息
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build文件夾下的webpack.base.conf.js的rules里面添加配置：
{
? ? ? ? test: /\.scss$/,
? ? ? ? loaders: ['style', 'css', 'sass']
? ? ? }"
"2、選項卡沉底：App.vue中添加全局樣式，Tabbar.vue中添加局部樣式，
iconfont方式添加圖片：
將所有圖片文件放在assets/iconfont文件夾下
在main.js文件中導(dǎo)入圖片文件
import './assets/iconfont/iconfont.css'
"
3、顯示請求數(shù)據(jù)（特殊處理設(shè)置請求頭獲取數(shù)據(jù)和反向代理）
4、過濾處理數(shù)據(jù)Vue.filter
"5、輪播效果：
不要下載最新版本的swiper，否則分頁欄和自動播放無效
npm install swiper@5.4.5 --save"
注意：如果反向代理不可用了，可嘗試清除一下瀏覽器的緩存歷史記錄
個人認(rèn)為App.vue中的<router-view/>就是與router文件夾中index.js配置路由（訪問路徑）中有關(guān)的一級路由，npm run dev運行后，這個<router-view/>會根據(jù)一級路由訪問路徑的不同變成對應(yīng)的訪問路徑的組件。
個人理解：當(dāng)你在router文件夾中index.js配置一級路由后，如果訪問對應(yīng)的訪問路徑后切換到一個組件，導(dǎo)航條<tabbar/>部分不變，再點擊這個組件的切換組件的超鏈接等等，再訪問的路徑一般是二級路由的訪問路徑
設(shè)置二級路由時要用children這個數(shù)組，同時設(shè)置二級路由是有2種方法的，如下圖所示
也可以再加<router-view/>,在children數(shù)組的path路徑中再加個“/vue組件文件名前綴”，這樣就可以設(shè)置三級路由，更多級的路由可以依次類推
用redirect重定向?qū)崿F(xiàn)，訪問某個一級路由的訪問路徑時，默認(rèn)"跳轉(zhuǎn)"(切換組件）到某個二級路由的訪問路徑的方法
個人理解<li v-for="data in dataList"? :key="data">{{data}}</li>的意思其實是把dataList遍歷出dataList.length個數(shù)據(jù)動態(tài)變量data?，同時生成dataList.length個以動態(tài)變量data為文本內(nèi)容的<li></li>.?:key="data"是 v-bind:key="data"的縮寫，是動態(tài)綁定地設(shè)置key。
個人理解：用this.$router.push('/(router文件夾中路由配置的path的內(nèi)容，一般我習(xí)慣是設(shè)置為首字母大寫或小寫的要切換到的組件名)‘）實現(xiàn)觸發(fā)綁定的點擊事件后，觸發(fā)的methods中的有頁面跳轉(zhuǎn)功能的viewDatail函數(shù)。
如果想實現(xiàn)傳參，可以把點擊事件觸發(fā)的函數(shù)viewDetail()改寫成viewDetail(data)，這樣觸發(fā)點擊事件時，也會傳參。同時viewDetail()里面的this.$router.push('/XXX‘）可以改寫成用了模板字符串的this.$router.push(`/XXX/${對應(yīng)的傳的參數(shù)名}`）
獲取地址欄中傳過來的參數(shù)名的內(nèi)容，其實也很簡單，我前面的專欄中講過，用動態(tài)傳參，即用{{$route.params.n}}(n是自定義的，n是在router文件夾中設(shè)置路由的path的內(nèi)容中的’detail/:n'的n）
當(dāng)然了，{{$route.params.n}}是在寫HTML代碼的<template></template>中寫的，但是在
寫js代碼的export default中的mouted等自己想用的方法中可以通過this.$route.params.n的方式獲取到地址欄傳過來的參數(shù)的內(nèi)容。
個人認(rèn)為：呃，其實還有種傳參的方法就是路由配置的name屬性傳參，其實和上面的動態(tài)傳參差不多，就是寫發(fā)不同，無非就是把模板字符串的this.$router.push(`/XXX/${對應(yīng)的傳的參數(shù)名}`）改寫成了this.$router.push({name:'dl',params:{n:name,id:1}}）等等,name:'dl‘要在對應(yīng)的路由配置中寫上可以傳多個參數(shù)，更方便，我一般習(xí)慣用這種方法傳參，前面我寫的專欄中應(yīng)該講過，忘了的讀者可以看我前面的專欄，并且給我個三連。
如果訪問路徑中有#，是因為我們在router文件夾中的index.js文件中的routes中沒有聲明mode:history,
就會默認(rèn)產(chǎn)生mode:hash（hash就是符號#的意思），你在routes中聲明mode:history，輸入訪問路徑時就不會出現(xiàn)#（我個人習(xí)慣不去除#，#就是區(qū)分請求路徑的，有時可以防止404界面的出現(xiàn)，如果說你聲明mode:history，美化了訪問路徑，但訪問路徑若是不存在，可能真的訪問其后臺路徑等等，那么就容易報404，這樣不美觀。一般如果訪問一個不存在的路徑時，會跳轉(zhuǎn)我們設(shè)置的一個美觀的提示該路徑不存在的頁面。如果可能出現(xiàn)404，且如果你是前端工程師等等，就要和負(fù)責(zé)后臺的人員商量，設(shè)置一個當(dāng)訪問一個不存在的路徑時，會跳轉(zhuǎn)到的美觀的提示該路徑不存在的頁面）
hash
個人理解：下面是實現(xiàn)全局路由守衛(wèi)的簡單例子，其實我認(rèn)為全局路由守衛(wèi)類似于Java中的
全局的過濾器等等，全局路由守衛(wèi)等的代碼是在我們訪問某個路徑時會先執(zhí)行的代碼，可以實現(xiàn)的功能為：若你想訪問個人中心界面，那么訪問個人中心路徑前會先執(zhí)行全局路由守衛(wèi)的代碼，判斷你是否登錄了，發(fā)現(xiàn)你沒有登錄就用next('/XXX')之類強制讓你跳轉(zhuǎn)到登錄界面等等（個人理解：next('/XXX')中的XXX就是router文件夾中的路由設(shè)置中的對應(yīng)組件的path對應(yīng)的值（或說是path對應(yīng)的內(nèi)容））。如果你登錄了，那么就允許你訪問個人中心界面。to.path就是你要訪問的界面的路徑。beforeEach也是鉤子函數(shù)。
在下圖中的實現(xiàn)點擊個人中心的超鏈接時會跳轉(zhuǎn)到登錄界面（當(dāng)然，這里的if判斷等等內(nèi)容要根據(jù)自己的需求，自己加上）的局部路由訪問的例子中用到了beforeRouterEnter，beforeRouterEnter也是鉤子函數(shù)。
代碼：
基本代碼見https://www.bilibili.com/read/cv11382966我是以此文中的文件的代碼為基礎(chǔ)來寫的代碼，下面我只展示我做了改動或新增了的文件的代碼部分。
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加的代碼?START
//?import?ZuJian1?from?'@/components/ZuJian1'
import?My?from?'@/components/My'
import?You?from?'@/components/You'
import?Film?from?'@/views/Film'
import?Cinema?from?'@/views/Cinema'
import?Center?from?'@/views/Center'
import?Detail?from?'@/views/Detail'
import?Nowplaying?from?'@/views/Film/Nowplaying'
import?Comingsoon?from?'@/views/Film/Comingsoon'
import?Login?from?'@/views/Login'
//自己加的代碼?END
Vue.use(Router)
const?router?=?new?Router({
??//?export?default?new?Router({
??routes:?[
????{
??????path:?'/',
??????name:?'HelloWorld',
??????component:?HelloWorld
????},
????//?//?http://localhost:8080/#/ZuJian1
????//?{
????//???path:?'/ZuJian1',
????//???name:?'ZuJian1',
????//???component:?ZuJian1
????//?}
????//?http://localhost:8080/#/my
????{
??????path:?'/my',
??????name:?'My',
??????component:?My
????},
????//?http://localhost:8080/#/you
????{
??????path:?'/you',
??????name:?'You',
??????component:?You
????},
????{
??????path:?'/film',
??????component:?Film,
??????children:?[//?二級路由：
????????//?http://localhost:8080/#/film/nowplaying
????????{
??????????path:?'/film/nowplaying',//——>也可以寫成path:?'nowplaying'
??????????component:?Nowplaying
????????},
????????{
??????????path:?'/film/comingsoon',//——>也可以寫成path:?'comingsoon'
??????????component:?Comingsoon
????????},
????????{
??????????path:?'',
??????????redirect:?'/film/nowplaying'
??????????//——>設(shè)置二級路由為空時訪問哪個組件,這里設(shè)置為nowplaying組件
????????}
??????]
????},?{//?http://localhost:8080/#/cinema
??????path:?'/cinema',
??????component:?Cinema
????},?{//?http://localhost:8080/#/center
??????path:?'/center',
??????component:?Center
????},?{
??????//動態(tài)傳參相關(guān)?START
??????path:?'/detail/:n',
???????//動態(tài)傳參相關(guān)?END
??????//name屬性傳參相關(guān)?START
??????name:?'dl',
???????//name屬性傳參相關(guān)?END
??????component:?Detail
????},
????{
??????path:?'/login',
??????component:?Login
????},
????
????{//?輸入不匹配的路徑是統(tǒng)一跳轉(zhuǎn)到/film對應(yīng)的組件
??????path:?'*',
??????redirect:?'/film'
????},
????
??]
})
//?全局路由守衛(wèi)實現(xiàn)安全驗證?START
//?router.beforeEach((to,?from,?next)?=>?{
//???if?(to.path?===?'/center')?{
//?????console.log('進行安全驗證')
//?????//?如果驗證成功，就允許跳轉(zhuǎn)到center頁面去
//?????//?next();
//?????//?如果驗證不成功，就強制跳轉(zhuǎn)到登錄頁面
//?????next('/login')
//???}?else?{
//?????next()
//???}
//?})
//?全局路由守衛(wèi)實現(xiàn)安全驗證?END
/*路由配置等中都要export?default?new?Router
等等，當(dāng)這里我用const?router?=?new?Router封裝了?new?Router，
其實也是進行字面量的定義,后面方便用router.beforeEach等等，實現(xiàn)
全局路由守衛(wèi)的安全驗證......
但export?default在結(jié)尾仍然不可以少*/
export?default?router
Comingsoon.vue
<template>
??<h1>即將上映</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Nowplaying.vue
<template>
??<div>
????<h1>正在熱映</h1>
????<ul>
??????<li?v-for="data?in?dataList"?:key="data"?@click="viewDetail(data)">
????????{{?data?}}
??????</li>
????</ul>
??</div>
</template>
<script>
export?default?{
??data()?{
????return?{
??????dataList:?["唐人街探案1",?"懸崖之上",?"唐伯虎點秋香"],
????};
??},
??methods:?{
????viewDetail(name)?{
??????//?console.log('顯示'?+?name?+?'的詳情')
??????//?配置路由動態(tài)綁定的相關(guān)內(nèi)容?START
??????//?this.$router.push(`/detail/${name}`)
??????//?配置路由動態(tài)綁定的相關(guān)內(nèi)容?END
??????//?路由配置的name屬性傳參的相關(guān)內(nèi)容?START
??????this.$router.push({
????????name:?"dl",
????????params:?{
??????????n:?name,
????????},
??????});
??????//?路由配置的name屬性傳參的相關(guān)內(nèi)容?END
????},
??},
};
</script>
<style>
</style>
Center.vue
<template>
??<h1>個人中心</h1>
</template>
<script>
export?default?{
??//?局部路由守衛(wèi)（有三個鉤子函數(shù)）?START
??beforeRouteEnter?(to,?from,?next)?{
????//?這個方法中不能使用this關(guān)鍵字
????console.log('安全驗證')
????//?允許訪問
????//?next()
????//?強制跳轉(zhuǎn)到登錄頁面
????next('/login')
??}
}
?//?局部路由守衛(wèi)（有三個鉤子函數(shù)）?END
</script>
<style>
</style>
Film.vue
<template>
??<div>
????<h1>電影LOGO</h1>
?????<!--?<div>電影Tab</div>?-->
????<router-view?/>
??</div>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
Login.vue
<template>
??<h1>登錄頁面</h1>
</template>
<script>
export?default?{
}
</script>
<style>
</style>
運行
http://localhost:8080/#/film/nowplaying
例子2：vue中的SASS的安裝（有時要注意cmd命令下載SASS，要用@指定適當(dāng)?shù)腟ASS版本的問題等等）
npm?install?sass-loader@7.3.1?--save-dev
npm?install?node-sass@4.14.1?--save-dev
在build目錄下的webpack.base.conf.js中的
?module中的rules里面寫上如下的代碼：
{
????????test:?/\.scss$/,
????????loaders:?['style',?'css',?'sass']
??????}
.staging
通常一個web項目都需要一個staging環(huán)境，一來給客戶做演示，二來可以作為production server的一個“預(yù)演”，正式發(fā)布新功能前能及早發(fā)現(xiàn)問題（特別是gem的依賴問題，環(huán)境問題等）。
staging server可以理解為production環(huán)境的鏡像， QA在staging server上對新版本做最后一輪verification, 通過后才能deploy到產(chǎn)品線上. 有點網(wǎng)訊SERCM流程里面的SDA驗證用的環(huán)境， 盡最大可能來模擬產(chǎn)品線上的環(huán)境(硬件，網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)，數(shù)據(jù)庫數(shù)據(jù))
