v-btn 内部路由和使用 router-link 之间的区别

Posted 2023-02-23

【中文标题】v-btn 内部路由和使用 router-link 之间的区别

【英文标题】：Difference between routing inside v-btn and using router-link

【发布时间】：2018-03-01 00:15:29

【问题描述】：

我正在学习 Vue.js，根据教程，a 用于将页面路由到另一个页面。他使用了一个被这个标签包裹的按钮，我发现在标签内使用了路由指令。 我想知道，这两种从一页转到另一页的方式有什么区别？它们似乎都产生了相同的行为（并且在更改页面时我没有发送或接收任何数据）。

比较代码：

使用 v-btn

<v-btn :to="name: 'songs-create'" 
      dark medium right bottom fab absolute 
      class="pink" slot="action">
        <v-icon>add</v-icon>
    </v-btn>

使用路由器链接

<router-link :to="name: 'Hello'" tag="span" class="logo">Tab Tracker</router-link>

提前致谢！

【问题讨论】：

应该是:to="`name: 'songs-create'`"

【参考方案1】：

v-btn 是vuetifyjs 的一个组件，而router-link 是vue-router 的一个组件。

当您通过传递路径对象使用v-btn 和to 属性时，它在内部使用vue-router 的router-link 组件的api。

所以 v-btn 在与to 属性一起使用时包装了 router-link 的功能。

他可以使用v-btn的原因是为了完成一些其他的事情，比如按钮样式和处理其他事件等。

【讨论】：

谢谢伙计，我没有意识到 v-btn 是一个 Vuetifyjs 组件！但是很高兴知道它可以包装 router-link 的功能，我现在可以在需要按钮时在我的 vue 组件上保存一些行！

很高兴我的回答对您有所帮助！