<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>