Vuetify 3.x中v-list-item如何配置使用Vue命名路由？

步骤1：修改v-list-item的to属性 #

你的路由已经定义了命名路由name: 'new-request'，直接把to的字符串路径改成对象语法即可，指定路由名称：

原代码片段：

<v-list-item
  link
  title="New Request"
  prepend-icon="mdi-newspaper-plus"
  exact
  to="/request/new-request"
  value="new-request"
></v-list-item>

修改后代码：

<v-list-item
  link
  title="New Request"
  prepend-icon="mdi-newspaper-plus"
  exact
  :to="{ name: 'new-request' }"
  value="new-request"
></v-list-item>

注意要给to加冒号:，因为这里是绑定一个JavaScript对象，而非普通字符串。

额外修复：模板语法错误 #

你的组件模板里有一个多余的</v-list-item>闭合标签（在New Request列表项的闭合标签之后），这会导致DOM渲染异常，需要删除该行。

路由配置小提示 #

你的子路由path使用了绝对路径/new-request，如果希望它作为/requests的子路由，通常可以写成相对路径new-request，此时实际访问路径会变为/requests/new-request，不过这一点不影响命名路由的正常使用，可根据业务需求自行调整。

内容的提问来源于stack exchange，提问作者maw2be