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è)置一個表示激活的 CSS 類名。
<router-link> 比起寫死的 <a href="..."> 會好一些，理由如下：
無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。
在 HTML5 history 模式下，router-link 會守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁面。
當(dāng)你在 HTML5 history 模式下使用 base 選項(xiàng)之后，所有的 to 屬性都不需要寫 (基路徑) 了。
示例代碼：
字符串形式，會默認(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)簽， 同樣它還是會監(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)擊時，會調(diào)用 router.replace() 而不是 router.push()，于是導(dǎo)航后不會留下 history 記錄。
<router-link :to="{name: 'test'}" replace>replace導(dǎo)航后不會留下 history 記錄</router-link>
藍(lán)藍(lán)設(shè)計(jì)( m.gerard.com.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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gerard.com.cn