当路径的一部分属于 $route.params 时,如何在 Vuetify 按钮中定义 Nuxt 链接?

6 javascript vuejs2 nuxt.js vuetify.js

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

 <v-btn                                                                                                                                                            
     dark                                                                                                                                                            
     color="orange"                                                                                                                                                  
     href="className/studentName"                                                                                                                                        
     nuxt                                                                                                                                                            
  >                                                                                                                                                               
    <v-icon large left>favorite</v-icon>                                                                                                                            
      studentName                                                                                                                                                        
  </v-btn> 
Run Code Online (Sandbox Code Playgroud)

我想重构这段代码,因为我知道我从路由中获得了 className:$route.params.className并且我从一个普通的 JavaScript 数组中获得了 studentName。

当我输入 href={{$route.params.className}}/studentName 时,出现错误:

请改用 v-bind 或冒号简写。例如,代替 ,使用 。

当我这样做时:

:href="$route.params.className/studentName"  
Run Code Online (Sandbox Code Playgroud)

我收到此错误:

无效的道具:道具“href”的类型检查失败。预期字符串,对象,得到数字。

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

小智 22

你应该使用 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>
Run Code Online (Sandbox Code Playgroud)


Ale*_*sky 1

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

:href="$route.params.className + '/studentName'"
Run Code Online (Sandbox Code Playgroud)

希望这有帮助!