2019-10-11 seo達(dá)人
<router-link>
<router-link> 組件支持用戶(hù)在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過(guò) to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過(guò)配置 tag 屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類(lèi)名。
<router-link> 比起寫(xiě)死的 <a href="..."> 會(huì)好一些，理由如下：
無(wú)論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級(jí)使用 hash 模式，無(wú)須作任何變動(dòng)。
在 HTML5 history 模式下，router-link 會(huì)守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁(yè)面。
當(dāng)你在 HTML5 history 模式下使用 base 選項(xiàng)之后，所有的 to 屬性都不需要寫(xiě) (基路徑) 了。
示例代碼：
字符串形式，會(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 類(lèi)指定何種標(biāo)簽， 同樣它還是會(huì)監(jiān)聽(tīng)點(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.chenguixiang.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.chenguixiang.net