vue3 路由传参

vue3 路由传参

1.直接上代码 引入并定义

import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()

2.开始使用

router 使用 router 是用来操作的 route 是用来读取的 要注意区别

  router.push({
            name: 'scale', params: {
                planId: xxxx,
                planName: xxx,
                flag: xxx,
                flagName: xxx,
                num: xxx

            }
    })

3.配置router.ts

这里是name跳转传输模式需要在这里配置
path跳转则不需要
但是path跳转会暴露变量名 --建议使用name跳转

   {
      path: 'scaleMiddle/:planId/:planName/:flag/:flagName/:num',
      name: 'scaleMiddle',
      component: () => import('@/views/ScaleMiddle.vue')//中间件

    },

4.读取值

  planId.value = route.params.planId as string
    planName.value = route.params.planName as string
    flagName.value = route.params.flagName as string
    num.value = route.params.num as string

结束----
诸君有用且点赞