Vue Router中获取路由传递过来的参数(方法详解)

目录

• 1. 动态路由匹配
• 2. 查询参数query
• 3. 通过 props 传递参数

在Vue Router中可以通过动态路由匹配和查询参数query来传递参数；同时也可以将路由参数或查询参数作为组件的props传递，这样组件可以直接通过props来访问这些参数。

1. 动态路由匹配

如果在路由配置中使用了动态路由(如/user/:id)，则可以通过route.params.id获取该参数。

// 路由配置
const routes = [
  { path: '/user/:id', component: User }
];
// 组件中获取参数

2. 查询参数query

如果URL中有查询字符串(如/user?id=123)或路由跳转时写了query【如router.push({path: ‘/user’,query: { id: 123}});】，则可以通过route.query.id获取该参数。

// 路由配置
const routes = [
  { path: '/user', component: User }
];
// 组件中获取参数

3. 通过 props 传递参数

在路由配置中启用 props，并将 params 作为 props 传递。

// 路由配置
const routes = [
  { path: '/user/:id', component: User, props: true }
];
// 组件中通过 props 获取参数

通过 props 传递查询参数。

// 路由配置
const routes = [
  { path: '/user', component: User, props: (route) => ({ id: route.query.id }) }
];
// 组件中通过 props 获取参数

到此这篇关于Vue Router中获取路由传递过来的参数(方法详解)的文章就介绍到这了,更多相关Vue Router路由参数内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！