路由传参(一)

最新推荐文章于 2025-03-29 14:10:00 发布

努力码代码啦啦啦

最新推荐文章于 2025-03-29 14:10:00 发布

阅读量295

点赞数 2

文章标签： vue

本文链接：https://blog.youkuaiyun.com/luwen63257270/article/details/115728402

版权

路由传参分为query传参和params传参

一 .使用query传参

地址栏显示:
路由跳转

<el-button type="text" size="small" @click="$router.push(`/employees/detail?id=${row.id}`)">查看</el-button>```

使用query传参就不需要额外配置路由规则,不用在路由规则中写参数

export default {
  path: '/employees',
  component: Layout,
  children: [
    {
      path: '', // 要么就空着, 要么就写全
      name: 'employees',
      component: () => import('@/views/employees'),
      meta: { title: '员工', icon: 'people' }
    },
    {
      path: 'detail', // 不写/ 会自动拼接成'/employees/detail'
      name: 'detail',
      hidden: true,
      component: () => import('@/views/employees/detail')
      // meta: { title: '查看详情', icon: 'people' }
    }
  ]
}

query传参获取参数

<template>
  <div class="detail">
    查看详情 {{ $route.query.id }}
  </div>
</template>

二. 使用params传参

地址栏显示:
路由跳转

<el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>

使用params传参,路由规则中必须做 /:id的占位

path: '/employees/detail/:id' // 动态参数匹配

params传参获取参数

<template>
  <div class="detail">
    查看详情 {{ $route.params.id }}
  </div>
</template>