vue-router的router-link詳解

2019-10-11    seo達(dá)人

<router-link>

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。



<router-link> 比起寫死的 <a href="..."> 會(huì)好一些，理由如下：



無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級(jí)使用 hash 模式，無須作任何變動(dòng)。

在 HTML5 history 模式下，router-link 會(huì)守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁面。

當(dāng)你在 HTML5 history 模式下使用 base 選項(xiàng)之后，所有的 to 屬性都不需要寫 (基路徑) 了。

示例代碼：



字符串形式，會(huì)默認(rèn)在當(dāng)前路由下給字符串前面加



<router-link to='propsView'>字符串形式One</router-link><br>

<router-link :to="{path: 'propsView', query: {id: 1}}" replace>字符串形式Two</router-link><br>

路徑形式 



<router-link to='/test/propsView'>路徑形式One</router-link><br>

<router-link :to="{path: '/test/propsView'}">路徑形式Two</router-link><br>

命名的路由 



<router-link :to="{name: 'test', params: {userId: 123}}">跳轉(zhuǎn)至test路由</router-link><br>

想要 <router-link> 渲染成某種標(biāo)簽，例如 <li>。 于是我們使用 tag prop 類指定何種標(biāo)簽， 同樣它還是會(huì)監(jiān)聽點(diǎn)擊，觸發(fā)導(dǎo)航。默認(rèn)值: "a"



<router-link :to="{name: 'test'}" tag="li">渲染成li標(biāo)簽</router-link><br>

設(shè)置 replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace() 而不是 router.push()，于是導(dǎo)航后不會(huì)留下 history 記錄。 



<router-link :to="{name: 'test'}" replace>replace導(dǎo)航后不會(huì)留下 history 記錄</router-link>


藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔