1、Vue Router創(chuàng)建路由實(shí)例默認(rèn)采用 hash 路由

企業(yè)網(wǎng)站設(shè)計(jì)，品牌網(wǎng)站建設(shè),上一章運(yùn)行結(jié)果我們發(fā)現(xiàn)地址欄后面會(huì)自動(dòng)在加一個(gè)#/，切換不同顯示，即切換路由，后面顯示就是#/about，#/news。為什么是這種顯示模式呢？因?yàn)樵趧?chuàng)建路由實(shí)例時(shí) vue Router 默認(rèn)采用的是hash 路由配置模式（各種瀏覽器的兼容性比較好）。當(dāng)在#/about，#/news 之間切換時(shí)，也就是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。

2、 通過(guò) mode 選項(xiàng)可改為 history 路由

如何改為 history 路由呢？對(duì)于網(wǎng)站開(kāi)發(fā)而言，上章創(chuàng)建路由實(shí)例時(shí)只設(shè)置了一個(gè)必須的選項(xiàng) routes，可以通過(guò)設(shè)置路由配置模式 mode 選項(xiàng)來(lái)改變默認(rèn)路由模式，如果不想要 hash 路由模式，只需要設(shè)置 mode 為history 即可。

const router = new VueRouter({

routes,

mode:‘history’ //設(shè)置路由配置模式，注意，單引號(hào)不能少

});

這種 history 路由配置模式缺點(diǎn)，URL 的兼容性不是很好哦，有些瀏覽器下可能不能正常顯示。

3、history 路由模式運(yùn)行效果分析

從上面運(yùn)行效果可以看出不論切換到【關(guān)于我們】還是【新聞】，地址欄不會(huì)有任何變化，可以說(shuō)不從下面顯示內(nèi)容來(lái)看，都不知道切換到哪個(gè)導(dǎo)航了。不過(guò)觀察生成的 html 代碼發(fā)現(xiàn)在當(dāng)前導(dǎo)航會(huì)增加一個(gè) class 樣式。

class=“router-link-exact-active router-link-active”

但是此樣式?jīng)]有效果顯示出來(lái)，實(shí)際上內(nèi)部只給出了樣式名，沒(méi)有設(shè)置具體樣式，需要自己手動(dòng)設(shè)置具體樣式。

4、為當(dāng)前【導(dǎo)航】添加樣式

實(shí)際上不論是 hash 路由還是 history 路由模式，系統(tǒng)都會(huì)自動(dòng)為當(dāng)前導(dǎo)航添加樣式的。比如添加如下樣式：當(dāng)前導(dǎo)航字體為紅色大小為 20px 等

<style>

.router-link-active{

font-size:20px;

color:red;

text-decoration: none;

}

</style>

注意：樣式名取后面一個(gè)名稱(chēng)即可,即上面的黃色代碼

此時(shí)再運(yùn)行效果如下圖所示：

4.1、改進(jìn)系統(tǒng)默認(rèn)生成的樣式名

系統(tǒng)默認(rèn)樣式名為.router-link-active，如果覺(jué)得太長(zhǎng)或不好記憶可以改掉，如何改呢？

在創(chuàng)建路由實(shí)例時(shí)再加一個(gè) linkActiveClass 選項(xiàng)，設(shè)置樣式名。

const router = new VueRouter({

routes,

mode:‘history’,

linkActiveClass:‘a(chǎn)ctive’});

此時(shí)樣式就要改為如下：

<style>

.active{

font-size:20px;

color:red;

text-decoration: none;

}

</style>

5、.配置根路由【路由重定向】

此外還有一個(gè)小問(wèn)題：不論哪種路由配置模式，剛打開(kāi)頁(yè)面時(shí)既沒(méi)有顯示【關(guān)于我們】?jī)?nèi)容，也沒(méi)有顯示【新聞】?jī)?nèi)容，因?yàn)槟J(rèn)打開(kāi)是進(jìn)入根路由，而根路由是不存在的。因此，配置路由時(shí)再增加一個(gè)路由（找不到路由時(shí)就重新定向到 about）。

即在下面增加黃色底紋代碼，表示找不到路由時(shí)，重新定向到 about。（定義路由格式：path 指定路由的 url，component 指定當(dāng)單擊 path 指定的 url 時(shí)顯示哪個(gè)組件內(nèi)容。）

const routes = [

{ path: ‘/about’, component: About },

{ path: ‘/news’, component: News },

{path:‘*’,redirect:‘/about’}//*表示找不到路由時(shí)，重定向到

about

]