在vue搭建多頁(yè)面應(yīng)用時(shí),那么自然而然會(huì)想到"路由",這也想起了vue官方文檔對(duì)于vuex的最后描述,
也讓我想起了在某次面試時(shí),有個(gè)面試官問(wèn)過(guò)這么一個(gè)問(wèn)題:"請(qǐng)問(wèn)什么時(shí)候發(fā)起ajax請(qǐng)求",如果重來(lái)一次的話我會(huì)回答"在你覺(jué)得需要吃飯的時(shí)候"耗帕。
那么回到碰見(jiàn)的問(wèn)題,使用路由的時(shí)候,對(duì)于需求稍微復(fù)雜一點(diǎn)的web路由的嵌套是不可避免的,如圖視圖路由的配置
然后再是routes的配置
像這種混合使用的路由,首先在視圖路由的初始化時(shí)必須給定父路由的路徑,如下圖
通過(guò)重定向來(lái)標(biāo)明路徑,為方便使用了數(shù)組來(lái)給router-link綁定的命名路由,所以如果是編程式路由時(shí)(給定的是path時(shí))就不需要這樣,這樣的話使用就是"絕對(duì)路徑"了忌警。
這就是大概的項(xiàng)目結(jié)構(gòu),顯而易見(jiàn)的是如果點(diǎn)擊導(dǎo)航欄的菜單,那么跳過(guò)去的是wechat這個(gè)相對(duì)而言的"父路由",那么就需要在某個(gè)時(shí)機(jī)重定向一下使其跳到子路由,我選擇的辦法是監(jiān)聽(tīng)$route也就是當(dāng)前的路由對(duì)象琳钉。
當(dāng)然這里是給f5刷新保留的路由記錄,在初始化(第一次進(jìn)入此路由無(wú)任何操作的情況下)是也得在wechat這個(gè)相對(duì)而言的父組件的鉤子函數(shù)內(nèi)(推薦created鉤子)重定向一下到想要的子路由亿蒸。
還有個(gè)問(wèn)題就是router-link選中時(shí)的樣式,官方給的active-class或者是全局的linkActiveClass(默認(rèn)是模糊匹配,如果需要精準(zhǔn)匹配的話就必須使用exact與其相對(duì)應(yīng)的linkExactActiveClass),但是這里的樣式只匹配于"/jk/wechat"這個(gè)路由,盡管是模糊匹配,但是貌似沒(méi)能進(jìn)行二次判斷(具體機(jī)制查閱了資料尚未了解到,可能需要閱讀源碼才能了解吧0.0),那么怎么才能按照自己想要的路由路徑配置相對(duì)應(yīng)的樣式呢,這里就用到了vue-router的另外一個(gè)屬性 meta,官方解讀:
? ??
所以可以通過(guò)給子路由綁定唯一的表示來(lái)判斷當(dāng)前路由是否加上樣式!如圖
再綁定一個(gè)自定義的樣式類(lèi)就ok了
今天的坑總結(jié)一下寫(xiě)個(gè)筆記,遇到問(wèn)題得多問(wèn)自己幾個(gè)為什么,我可不想成為那種"內(nèi)行看笑話,外行看熱鬧的搬運(yùn)工",突然有感哈哈哈哈挎狸。
