Vue 中的 router-link 组件介绍

router-link 组件 创建一个 <a> 配置为与 Vue 路由器 。 例如给定以下 Vue 代码：

const router = new VueRouter({
  routes: [
    { path: /home, component: { template: <h1>Home</h1> } },
    { path: /about, component: { template: <h1>About Us</h1> } }
  ]
});

const app = new Vue({
  router,
  template: `
    <div>
      <div>
        <router-link to=/home>Home</router-link>
        <router-link to=/about>About Us</router-link>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount(#content);

Vue 将呈现以下 HTML。 注意 <router-link> 变成一个普通的老人 <a> 标签。

<div>
  <a href=#/home class=>Home</a>
  <a href=#/about class=>About Us</a>
</div>
<div><!----></div>

通过上面的例子，你可以编写自己的 <a> 标签而不是经过 <router-link>，但是你需要做额外的工作来支持 命名路由 和 HTML5 模式 。

自定义标签

router-link 组件支持整洁 tag 道具 允许您指定用于导航的自定义标签的 <a>，例如以下是如何使用按钮进行导航而不是 <a> 标签：

const app = new Vue({
  router,
  template: `
    <div>
      <div>
        <router-link to=/home tag=button>Home</router-link>
        <router-link to=/about tag=button>About Us</router-link>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  `
}).$mount(#content);

Vue 将呈现以下 HTML：

<div>
  <button class=>Home</button>
  <button class=>About Us</button>
</div>
<div><!----></div>

看起来按钮没有做任何事情，但是 Vue Router 注册了事件处理程序以使单击按钮触发导航。