輔助路由案例的思路：

1、在APP組件模板上再定一個(gè)插座來(lái)顯示在線咨詢組件

aux是輔助的意思，name里可以隨便起名字

2、單獨(dú)開(kāi)發(fā)一個(gè)在線咨詢組件，只顯示在新定義的插座上

首先生成一個(gè)consult咨詢組件

consult組件模板

consult組件的css樣式

然后用css樣式調(diào)整下主頁(yè)模板和股票詳情模板

主頁(yè)模板

股票詳情模板

在路由配置中寫咨詢組件的輔助路由，其中outlet指定放在哪個(gè)路由插座上

3、通過(guò)路由參數(shù)控制新的輔助插座是否顯示在線咨詢組件

在主頁(yè)模板上添加2個(gè)鏈接，一個(gè)是開(kāi)始咨詢，一個(gè)是結(jié)束咨詢

開(kāi)始咨詢鏈接中routerlink里不是寫路徑了，而是寫路由插座信息，outlets對(duì)應(yīng)路由插座是aux，aux后對(duì)應(yīng)consult組件的路由路徑consult。

結(jié)束咨詢中aux對(duì)應(yīng)的路由路徑是null，表示什么都不顯示

最后看看實(shí)際效果：

點(diǎn)擊開(kāi)始咨詢，出現(xiàn)綠色咨詢框。點(diǎn)擊結(jié)束咨詢，咨詢框消失。

如果在開(kāi)始咨詢鏈接中routerlink里outlets后添加“primary：home”，其中primary表示主路由，這句話的意思是當(dāng)點(diǎn)擊開(kāi)始咨詢時(shí)，控制主路由跳轉(zhuǎn)至主頁(yè)上

效果如下：