Vue（Quasar框架）中this.$router.push无法传递参数求助

1. 修正路由路径冲突 #

你的路由配置中，父路由path: '/login'与子路由path: '/login'重复，导致路由匹配逻辑异常（实际子路由路径会变为/login/login），直接影响参数传递。将子路由的path改为空字符串，让它匹配父路由的路径：

{
  // student login
  path: '/login',
  name: 'login',
  component: () => import('layouts/student/MainLayout.vue'),
  children: [
    { path: '', name: 'Login page', component: () => import('pages/student/LogInPage.vue')}
  ],
  meta: { preventLoginUser: true },
  props: true
},

2. 确保子路由支持参数接收 #

如果想通过组件props接收参数，需要在子路由中单独配置props: true；如果直接通过$route获取，则无需额外配置，但要保证路由匹配正确：

children: [
  { path: '', name: 'Login page', component: () => import('pages/student/LogInPage.vue'), props: true}
],

3. 验证参数传递与接收 #

确认页跳转代码保持不变：

this.$router.push({ name: 'Login page', params: {data: '1'} })

登录页中直接获取参数：

mounted() {
  console.log('params data:', this.$route.params.data)
},

备选方案：使用query参数传递（适合提示信息场景） #

如果params传递仍有问题，或者需要参数在页面刷新后不丢失，可以改用query参数：

确认页跳转代码：

this.$router.push({ name: 'Login page', query: {data: '1'} })

登录页接收：

mounted() {
  console.log('query data:', this.$route.query.data)
},

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