首页 > 解决方案 > v-list-item-title 加入 App.vue 中的路由器链接

问题描述

有没有其他方法可以编写下面这行代码以获得更好的 UI 交互?

<v-list-item>
<v-list-item-title>
<router-link to="historicalFigures">Historical Figures </router-link>
</v-list-item-title>
</v-list-item>

我问这个是因为使用上面的代码,只有当我单击导航栏的链接时才会显示结果。像这样

在此处输入图像描述

但是当我单击链接周围的区域时,没有任何显示或响应。

标签: vue.jsvuetify.js

解决方案


尝试在 v-list-item 上放置一个“to”道具,而不是在编写代码时嵌套路由器链接。或者,您可以在 v-list-item 上使用 @click,该方法将使用 this.$router.push('/historicalFigures')

<v-list-item to='historicalFigures'>
    <v-list-item-title>Historical Figures</v-list-item-title>
</v-list-item>

推荐阅读