一、路由相關(guān)點(diǎn)

1. 路由跳轉(zhuǎn)傳參以及接參
https://segmentfault.com/a/1190000012393587
方法一：

（1） 參數(shù)配置：

{ path : 'xx/:參數(shù)變量',component:xx}

(2) 使用

<router-link to='xx/參數(shù)'></router-link>

(3) 傳參

<router-link to='xx/參數(shù)?a=1&b=2'></router-link>

(4) 獲取參數(shù)

this.$route.params this.$route.query

方法二：
（1）參數(shù)配置

{ path : 'xx/:參數(shù)變量A',component:xx}

(2) 使用及傳參

<router-link to='{name:'xx',params:{參數(shù)變量A:值},query:{}}'></router-link>

(3) 獲取參數(shù)

this.$route.params this.$route.query

注意：name 中的 ‘xx’ 是 router 配置中的 name 值，params 中的參數(shù)變量要與 router 配置中 path 的 參數(shù)變量一致，query 是要傳的參數(shù)，相當(dāng)于 a=1&b=2

方法三：
（1） 使用及傳參

this.$router.push({path: '/propertyInfo/mall/mallList',// name: 'mallList',query: {mallCode: 'M000989'}})

（2）獲取參數(shù)：

this.$route.query

2. keep-alive
keep-alive 會(huì)記錄緩存，若不想被記錄緩存，可以將生命函數(shù)鉤子替換為： activated() 鉤子。

例如：直接在 created 中寫 console.log ，它在第一次進(jìn)入這個(gè)頁(yè)面時(shí)會(huì)被打印，后面將不會(huì)再打印出來(lái)


將 created 替換成 activated 后，每次進(jìn)入該頁(yè)面，該頁(yè)面都將清楚緩存（有點(diǎn)類似 F5 刷新）

3. router-view

若果像注釋那樣寫，將會(huì)在頁(yè)面上渲染出3個(gè)相同的組件，調(diào)用接口時(shí)，將會(huì)被多次調(diào)用。
解決辦法： 在后面寫一個(gè)router-view就好了

<keep-alive><router-view /> </keep-alive>

產(chǎn)生的問(wèn)題是，渲染出來(lái)的DOM結(jié)構(gòu)與 tabs 不是父子關(guān)系，而是兄弟關(guān)系。

上面的問(wèn)題可以使用組件解決



注意： 因?yàn)槭窃谕粋€(gè)父組件中，tabs 之間如果要路由跳轉(zhuǎn)，可以使用命名視圖。
4. 命名視圖
https://router.vuejs.org/zh/guide/essentials/named-views.html
路由官網(wǎng)： https://router.vuejs.org/zh/
（1） 使用方法：可作為頁(yè)面的二級(jí)頁(yè)面-詳情頁(yè)

修正一下： 命名視圖并不會(huì)替換與它 router-view 同級(jí)的所有dom
（3） 路由配置：

二、路由進(jìn)階 - 路由守衛(wèi)

vue-Router文檔
導(dǎo)航守衛(wèi)的三種實(shí)現(xiàn)方法：全局守衛(wèi)、路由獨(dú)享的守衛(wèi)、組件內(nèi)的守衛(wèi)
前置守衛(wèi)： 判斷用戶是否登錄，如登錄就可以進(jìn)入用戶頁(yè)，否則阻止用戶進(jìn)入用戶頁(yè)。登錄之后跳到用戶頁(yè)
后置守衛(wèi)： 在某一個(gè)頁(yè)面輸入一系列信息之后，用戶失誤點(diǎn)擊了跳轉(zhuǎn)到另外一個(gè)頁(yè)面，再跳轉(zhuǎn)到該頁(yè)面，此時(shí)用戶之前輸入的信息將會(huì)被清空。后置守衛(wèi)是為了用戶輸入信息后未保存就跳轉(zhuǎn)頁(yè)面時(shí)，信息不會(huì)被清空

1. 全局前置守衛(wèi)：beforeEach 、afterEach

//在 main.js中router.beforeEach(to,form,next) =>{//to: 即將要進(jìn)入的目標(biāo) 路由//from : 當(dāng)前導(dǎo)航正要離開(kāi)的路由//next(): 讓from->to這一過(guò)程執(zhí)行完，如果不寫next()，就相當(dāng)于執(zhí)行了next(false)//next(false): 中斷 from-> to 這一過(guò)程 }) router.afterEach((to, from) => { // ... })

2. 路由獨(dú)享守衛(wèi)： beforeEnter、afterEnter
在路由配置上直接定義，只有該路由會(huì)被守衛(wèi)

routes: [{path: '/foo',component: Foo,beforeEnter: (to, from, next) => {// ...}} ] //或者 let userIn = (to, from, next) => {// ... } routes: [{path: '/foo',component: Foo,beforeEnter: userIn}]

3. 組件內(nèi)的守衛(wèi)： beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
組件內(nèi)的守衛(wèi) 在組建中的 export default{} 中

三、插槽

如在 header 組件中添加插槽

使用：

效果：

四、打包小細(xì)節(jié)

找到 routers 文件夾下的 index.js 中替換掉原來(lái)的 base 為 base:"名稱"

vue.config.js配置中添加 publicPath : '/名稱',

如果還是打不開(kāi)，在該項(xiàng)目下 “以管理員身份” 打開(kāi) cmd ,安裝 npm install http-server -g ，然后進(jìn)入 cd dist 文件夾，輸入 http-server

用任意一個(gè)地址 + /index.html 打開(kāi)，例如這里我用 http://127.0.0.1:8080/index.html
(1) 如果 http-server 安裝不成功，檢查是否是在 管理員身份 下運(yùn)行，必須在管理員身份下才能運(yùn)行。
（2）http-server 不是內(nèi)部命令的問(wèn)題：在cmd 上輸入 npm config ls,檢查npm 的安裝路徑，復(fù)制 prefix 中的路徑，把它添加到 環(huán)境變量中，注意環(huán)境變量中只有一個(gè) \

（3）怎么配置環(huán)境變量：如下圖方式打開(kāi)

屬性->高級(jí)系統(tǒng)設(shè)置->高級(jí)->環(huán)境變量 ->path ->編輯

http-server 后還報(bào)404？配 nginx
https://blog.csdn.net/qq_35437791/article/details/97271373

打包后如果想繼續(xù)查看項(xiàng)目，記得注釋掉 publick:"./"，否則會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)如下

總結(jié)

以上是生活随笔為你收集整理的创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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