[TOC]

创建⽂件

// role/alloc-menu.vue

添加路由，设置动态路由参数

// router/index.js … { path: ‘/role/:roleId/alloc-menu’, name: ‘alloc-menu’, component: () => import(/ webpackChunkName: ‘alloc-menu’ / ‘@/views/role/alloc-menu’) } ] …

点击分配菜单按钮，进⾏导航跳转。

跳转后，可以通过 $route 来获取到要分配菜单的⽤户 id。

// list.vue type=“text” @click=“$router.push({ name: ‘alloc-menu’, params: { roleId: scope.row.id } })” >分配菜单 使⽤这种⽅式⾮常简单，但会让组件与路由耦合（组件⽆法独⽴于路由使⽤）。

如果希望组件与路由解耦，可以将动态路由参数替换为 props（详⻅ Vue Router 阶段 -> 路径传参处理）。

// router/index.js // - 设置 props: true，让路径参数通过 props ⽅式传递给组件 { path: ‘/role/:roleId/alloc-menu’, name: ‘alloc-menu’, component: () => import(/ webpackChunkName: ‘alloc-menu’ /‘@/v iews/role/alloc-menu’), props: true }, // alloc-menu.vue props: { // 组件内需要通过 props 接收路径传递的参数，实现解耦 // - 注意，$route ⾥的数据虽然还能访问，但不要⽤，否则组件与路由还是耦合， 解耦就⽩写了 roleId: { type: [String, Number], required: true } }