Vue.js中router-link无法传递参数至组件的问题排查

我明白你遇到的问题了——你想点击主菜单按钮时，把对应菜单数据传给Sidebar组件，但组件一直报缺少routes prop的警告，子菜单也出不来。咱们一步步拆解问题，然后给出可行的解决方案。

为什么你的代码会报错？ #

先看核心问题：

1. 路由参数无法传递数组：你在router-link里用params传递数组（比如projectMenus），但路由参数只能是字符串/数字类型，数组会被强制转为字符串（比如['overview','settings']变成"overview,settings"），而且你的路由路径里根本没定义routes这个参数，所以这个值根本传不到路由里。
2. Props配置不匹配：你在路由里设置了props:{sideview:true}，这个配置是把路由的params映射为组件的props，但因为上面的问题，routes参数根本没被路由捕获，自然无法传递给Sidebar组件。

解决方案：用路由Meta+Props函数传递数组 #

我们换一种思路，把菜单数据存在路由的meta字段里，然后通过路由的Props函数把meta里的菜单数据传递给Sidebar组件。这种方法能完美支持数组类型的props，而且逻辑更清晰。

修改后的完整代码

// 先定义菜单数据（可以统一管理，方便后续修改）
const projectMenus = ['overview', 'settings'];
const assetsMenus = ['landscapes', 'characters'];

const Sidebar = { 
  name:'sidebar', 
  template:` <div> Sidemenu <router-link v-for="route in routes" :key="route" :to="route">{{route}}</router-link> </div>`,
  props: { 
    routes:{ 
      type: Array, 
      required: true, 
      default: () => [] 
    } 
  } 
} 

const AppMenu = { 
  name:'app-menu', 
  // 去掉params，只需要跳转到对应路由名称即可
  template:` <div> 
    <router-link :to="{name:'project'}">Project</router-link> 
    <router-link :to="{name:'assets'}">Assets</router-link> 
  </div>`
} 

const App = { 
  template:` <div> 
    <app-menu/> 
    <router-view name="sideview"/> 
    <router-view name="sectionview"/> 
  </div>`,
  components:{AppMenu} 
}; 

const Routes= [ 
  {path: '/', name:'home', redirect: 'project'}, 
  {
    path:'/project', 
    name:'project', 
    components:{sideview:Sidebar}, 
    // 使用Props函数，把路由meta里的routes传递给sideview组件
    props: {
      sideview: (route) => ({ routes: route.meta.routes })
    },
    meta: { routes: projectMenus } // 存储当前路由对应的菜单数据
  },
  {
    path:'/assets', 
    name:'assets', 
    components:{sideview:Sidebar}, 
    props: {
      sideview: (route) => ({ routes: route.meta.routes })
    },
    meta: { routes: assetsMenus }
  } 
] 

另一种方案：用Vuex管理菜单数据（适合复杂场景） #

如果你的项目后续有更复杂的菜单状态管理需求，比如菜单权限、动态菜单，推荐用Vuex：

1. 在Vuex的state里添加currentSidebarRoutes字段。
2. 在AppMenu的router-link上绑定点击事件，点击时提交mutation更新currentSidebarRoutes。
3. 在Sidebar组件里通过mapState获取currentSidebarRoutes，就不用依赖路由传递props了。

这样修改后，你点击主菜单按钮时，Sidebar组件就能正确接收到对应的菜单数组，控制台的警告会消失，子菜单也能正常渲染啦。

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