使用 vue-router 将对象传递到路由

问题描述 投票:0回答:1

基于 vue-routers 站点的 this ,似乎您可以将对象作为 prop 传递。然而,每次我尝试这样做时,似乎都无法说无效参数

我的路线定义如下:

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('../layouts/DashboardLayout.vue'),
      meta: {
        requiresAuth: true,
      },
      children: [
        {
          path: '/upload',
          name: 'Upload Review',
          component: () => import('../pages/CertificationUploadPage.vue'),
          props: { mode: 'manual'}
        },
      ],
    },
    // default redirect to home page
    { 
      path: '/:pathMatch(.*)*', 
      redirect: '/error',
      meta: {
      requiresAuth: true,
      }
    },
    { path: '/:pathMatch(.*)*', 
      redirect: '/login',
      meta: {
        requiresAuth: false,
     }
    }
  ]
})

我使用以下方式以编程方式推送新页面:

router.push({ name: 'Upload Review', params : {mode: 'email'} })

我很好奇我是否也可以更进一步并传递一个嵌套对象以及一些我想要到达下一页/组件的附加数据,或者我是否必须使用 pinia 来实现?

javascript vuejs3 vue-router
1个回答
0
投票

可能您必须定义路径才能以这种方式使用它。 类似这样的东西:

routes: [
    {
      path: '/',
      component: () => import('../layouts/DashboardLayout.vue'),
      meta: {
        requiresAuth: true,
      },
      children: [
        {
          path: '/upload/:mode?',
          name: 'Upload Review',
          component: () => import('../pages/CertificationUploadPage.vue'),
          props: { mode: 'manual'}
        },
      ],
    },

然后在组件CertificationUploadPage中:

<template>
  <h2>{{ localMode }}</h2>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const { mode } = defineProps<{
  mode: string;
}>();
const route = useRoute();
const localMode = ref(route.params.mode || mode);
onMounted(() => {
  console.log('Mounted Mode');
  console.log(mode);
});
</script>

最美好的祝愿

© www.soinside.com 2019 - 2024. All rights reserved.