2019-10-11 seo達人
<router-link>
<router-link> 組件支持用戶在具有路由功能的應用中 (點擊) 導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽.。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名。
<router-link> 比起寫死的 <a href="..."> 會好一些，理由如下：
無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。
在 HTML5 history 模式下，router-link 會守衛點擊事件，讓瀏覽器不再重新加載頁面。
當你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫 (基路徑) 了。
示例代碼：
字符串形式，會默認在當前路由下給字符串前面加
<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}}">跳轉至test路由</router-link><br>
想要 <router-link> 渲染成某種標簽，例如 <li>。 于是我們使用 tag prop 類指定何種標簽， 同樣它還是會監聽點擊，觸發導航。默認值: "a"
<router-link :to="{name: 'test'}" tag="li">渲染成li標簽</router-link><br>
設置 replace 屬性的話，當點擊時，會調用 router.replace() 而不是 router.push()，于是導航后不會留下 history 記錄。
<router-link :to="{name: 'test'}" replace>replace導航后不會留下 history 記錄</router-link>
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。