1、通過標(biāo)簽進(jìn)行路由跳轉(zhuǎn)

1.1? 標(biāo)簽跳轉(zhuǎn)路由的方式

????????Vue Router提供了兩個(gè)內(nèi)置的組件幫助我們進(jìn)行路由的跳轉(zhuǎn)

????????使用方式：

代碼

代碼

?結(jié)果說明：

????????1.? router-link 會(huì)自動(dòng)的被渲染為a標(biāo)簽

????????2.? router-view為組件顯示的位置，會(huì)被顯示的組件給替換掉

????????3.? li標(biāo)簽嵌套a標(biāo)簽

1.2? router-link組件的其他屬性

????????很顯然，我們目前已知的屬性有 to 屬性，用來跳轉(zhuǎn)路由，那么router-link還有哪些其他的屬性呢？

1.2.1? tag屬性

????????tag屬性用于指定router-link組件在渲染時(shí)被渲染成什么標(biāo)簽，修改代碼如下：

代碼

?修改結(jié)果說明：

????????1、在開發(fā)中router-link就不用在被li標(biāo)簽所嵌套，減少一層標(biāo)簽的使用

????????2、因?yàn)閞outer-link在渲染時(shí)會(huì)被渲染為li標(biāo)簽，因?yàn)榉蠘?biāo)簽嵌套規(guī)則，ul中嵌套li

????????3、前端路由的跳轉(zhuǎn)可以是任何標(biāo)簽

????????4、router-link可以通過tag屬性指定渲染為任何標(biāo)簽

1.2.2? replace屬性

????????replace屬性是直接替換當(dāng)前history記錄，因此就不能利用瀏覽器的前進(jìn)后退鍵來切換路由顯示，在默認(rèn)的情況下，每次切換路由都是在像history歷史記錄中添加路由，這樣就可以通過瀏覽器前進(jìn)后退切換頁面顯示，如果不希望用戶使用瀏覽器前進(jìn)后退，就可以使用replace屬性。

代碼

????????雖然多次切換了路由，但是每一次切換路由都是通過replace替換history歷史記錄，因此不會(huì)生產(chǎn)新的歷史記錄，也就不會(huì)使用前進(jìn)后退鍵。

1.2.3? active-class屬性

????????當(dāng)<router-link>對(duì)應(yīng)的路由匹配成功以后，會(huì)自動(dòng)給當(dāng)前路由添加一個(gè) router-link-active 的類名

????????當(dāng)前頁面路由匹配成功，頁面顯示關(guān)于我們，同時(shí)頁面的路由會(huì)自動(dòng)擁有router-link-active的類名，active指的活躍，router-link-active理解為激活的路由。

????????因此，可以利用這個(gè)路由來做切換路由的高亮顯示，通過router-link-active類自定義當(dāng)前路由的樣式

代碼

樣式的修改

????????每次切換路由，當(dāng)前匹配的路由都會(huì)具有 router-link-active，具有這個(gè)類名的，也就有了其他路由不同的樣式。

????????但也可以通過<router-link>組件中 active-class 屬性來修改

代碼

????????除了在router-link組件中通過active-class屬性修改外，還可以在路由的配置對(duì)象中修改，如果整個(gè)項(xiàng)目中所有活躍路由的類名需要修改的話，可以在路由配置中修改

router文件下的index.js

2、編程式導(dǎo)航

????????通過<router-link>組件渲染的html標(biāo)簽進(jìn)行跳轉(zhuǎn)，還可以在方法中進(jìn)行路由的跳轉(zhuǎn)，在方法中進(jìn)行的路由跳轉(zhuǎn)稱為 編程式導(dǎo)航。

代碼

????????結(jié)果依然是可以正常執(zhí)行的。

3、? 替換history記錄

????????push方法可以跳轉(zhuǎn)路由，但是正如之前說的，push在每一次跳轉(zhuǎn)路由的時(shí)候，都會(huì)在history新增歷史記錄。想要替換history記錄，可以使用replace方法。