Vue3+Vuetify中v-list-item的to属性无法生成链接问题

架构老林

2026-7-26

Vuetify v-list-item to 属性失效的原因及解决办法

核心原因

Vuetify的v-list-item组件的to属性依赖于Vue Router与Vuetify的正确集成。如果初始化Vuetify时没有传入Vue Router实例，组件无法识别to属性并生成对应的路由链接，自然无法触发跳转。

解决步骤

1. 确认Vue Router的基础配置

先检查路由文件（通常是src/router/index.js）的结构是否正确：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/new',
    name: 'New',
    component: () => import('../views/New.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. 在Vuetify初始化时注入Router实例

打开Vuetify配置文件（通常是src/plugins/vuetify.js），将已创建的Router实例传入Vuetify的挂载流程：

import { createApp } from 'vue'
import App from '../App.vue'
import router from '../router'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

// 同时挂载Router与Vuetify
createApp(App)
  .use(router)
  .use(vuetify)
  .mount('#app')

3. 保留原有组件写法即可

你的v-list-item代码本身没有问题，集成完成后to属性会自动生效，无需手动嵌套router-link：

<v-navigation-drawer>
  <v-list>
    <v-list-item to='/' :title="$t('app.home')"></v-list-item>
    <v-list-item to='/new' :title="$t('app.new')"></v-list-item>
  </v-list>
</v-navigation-drawer>