当部分路径属于 $route.params 时，如何在 Vuetify 按钮中定义 Nuxt link？

Question

在 Nuxt 和 Vuetify 应用程序中，我有一系列按钮：

<v-btn dark color="orange" href="className/studentName" nuxt>
  <v-icon large left>favorite</v-icon>
  studentName
</v-btn>

我想重构这段代码，因为我知道我从路由中获取了 className：$route.params.className 我从普通的 JavaScript 数组中获取了 studentName。

当我键入 href={{$route.params.className}}/studentName 时出现错误：

Use v-bind or the colon shorthand instead. For example, instead of
, use .

当我这样做时：

:href="$route.params.className/studentName"

我得到的是这个错误：

Invalid prop: type check failed for prop "href". Expected String, Object, got Number.

那么如何在不硬写 className 的情况下正确定义我的 href 道具（我的意思是我想使用 $route.params.className 来重构我有几个按钮的代码？

Answer 1

您可以使用如下语句评估路由参数值并附加字符串 /studentName:

:href="$route.params.className + '/studentName'"

希望对您有所帮助！

Answer 2

您可以使用 v-bind:href=className+"/"+studentName 来实现此功能。您可以在 https://codepen.io/mohithg/pen/yxRabK

找到工作代码

Answer 3

你应该使用to="studentName" nuxt

例如：

 <v-toolbar-items class="hidden-sm-and">
    <v-btn flat to="/home" nuxt> Home </v-btn>
    <v-btn flat to="/contact" nuxt> Contact </v-btn>
    <v-btn flat to="/login" nuxt> Login </v-btn>
 </v-toolbar-items>

当部分路径属于 $route.params 时，如何在 Vuetify 按钮中定义 Nuxt link？

How to define a Nuxt link in a Vuetify button when portion of the path belongs to $route.params?

javascript

vuejs2

nuxt.js

vuetify.js