PrimeVue Menu无法跳转至Vue3 TypeScript应用视图页面求助

我开发了一个基于Vue3 + TypeScript的应用，使用PrimeVue的Menu组件，但添加url属性后无法正常跳转到指定视图页面。以下是相关代码片段：

<script setup lang="ts">
import { ref } from 'vue';
import Menubar from 'primevue/menubar'
import Menu from 'primevue/menu';

const items = ref([
    {  
        items: [{
            label: 'Search',
            icon: 'pi pi-search',
            url: './LeftNavigation.vue'
        },
        {
            label: 'View Completed',
            icon: 'pi pi-check-square', 
            url: '../views/CompletedTasks.vue'
        },
        {
            label: 'Delete',
            icon: 'pi pi-trash',
            url: '../views/DeletedTasks.vue'
        },
        {
            label: 'View Archived',
            icon: 'pi pi-cloud-upload',
            url: '../views/Archived.vue'
        },
        {
            label: 'View All',
            icon: 'pi pi-list',
            url: '../views/AllTask.vue'
        },                                                                
    ]},
]);
</script>
<template>
   <Menu :model="items" />
</template>

我的GitHub代码地址：github.com/isogunro/vue3ToDo/tree/ver1todo

问题原因及解决办法 #

核心问题：URL配置错误 #

PrimeVue Menu的url属性接收的是Vue Router定义的路由路径，不是组件文件的相对路径。你现在写的是组件文件的物理路径，浏览器无法识别为有效路由，自然跳不动。

正确配置步骤 #

1. 确认Vue Router已配置

先确保项目里已经安装并配置了Vue Router，且路由规则中注册了对应视图的路径，示例如下：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import CompletedTasks from '../views/CompletedTasks.vue'
import DeletedTasks from '../views/DeletedTasks.vue'
import Archived from '../views/Archived.vue'
import AllTask from '../views/AllTask.vue'
import LeftNavigation from './LeftNavigation.vue' // 根据实际路径调整

const routes = [
  { path: '/search', name: 'Search', component: LeftNavigation },
  { path: '/completed', name: 'CompletedTasks', component: CompletedTasks },
  { path: '/deleted', name: 'DeletedTasks', component: DeletedTasks },
  { path: '/archived', name: 'Archived', component: Archived },
  { path: '/all', name: 'AllTask', component: AllTask }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

2. 修改Menu的items配置

把url替换成对应的路由路径，而不是组件文件路径：

<script setup lang="ts">
import { ref } from 'vue';
import Menu from 'primevue/menu';

const items = ref([
  {  
    items: [
      {
        label: 'Search',
        icon: 'pi pi-search',
        url: '/search'
      },
      {
        label: 'View Completed',
        icon: 'pi pi-check-square', 
        url: '/completed'
      },
      {
        label: 'Delete',
        icon: 'pi pi-trash',
        url: '/deleted'
      },
      {
        label: 'View Archived',
        icon: 'pi pi-cloud-upload',
        url: '/archived'
      },
      {
        label: 'View All',
        icon: 'pi pi-list',
        url: '/all'
      },                                                                
    ]
  },
]);
</script>
<template>
  <Menu :model="items" />
</template>

3. 可选：用命令式跳转实现复杂逻辑

如果需要在跳转前做校验或其他逻辑，可以用command属性代替url，结合Vue Router的push方法：

<script setup lang="ts">
import { ref } from 'vue';
import Menu from 'primevue/menu';
import { useRouter } from 'vue-router';

const router = useRouter();

const items = ref([
  {  
    items: [
      {
        label: 'Search',
        icon: 'pi pi-search',
        command: () => {
          // 这里可以加跳转前的逻辑，比如权限校验
          router.push('/search')
        }
      },
      // 其他菜单项同理
    ]
  },
]);
</script>

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