vue-router中如何让'router-link'渲染成指定的标签？

大家都知道vue-router中<router-link> 默认会被渲染成一个 `<a>` 标签：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

比如上面'<router-link to="/foo">Go to Foo</router-link>'的就会被渲染成：

<a data-v-469af010="" href="#/foo" class="">
        Go to Foo
      </a>

那如果我们根据需要想把'router-link'渲染成指定的标签该怎么办呢？其实很简单，如下例所示：

把'router-link'渲染成span

<router-link to="/foo" tag="span">Go to Foo</router-link>

这样'router-link'就会被渲染成span标签了：

<span data-v-469af010="" class="">Go to Foo</span>