vue获取路由参数方法（路由的参数传递与接收详解）

一、什么是路由参数？

Vue Router提供了两种参数传递的模式，params模式 与 query模式。

1、params模式

路径参数用 冒号: 表示，当一个路由被匹配成功，它的params值将被保存到路由地址的params属性中，在接收的时候，通过 router.params 就可以拿到传递的参数。

// 定义如下两个路由Test和Test1，并给Test路由配置参数
// router/index.js
const routes = [{
	path: '/test/:id,
  name: 'Test',
  component: () => import('@/views/test/Test.vue')
}, {
	path: '/test1,
  name: 'Test1',
  component: () => import('@/views/test/Test1.vue')
}]

// 如果Test1路由，想要跳转到Test路由，并且传递参数，如下操作
// views/test/Test1.vue
router.push({
	name: 'Test',
  params: {
  	id: 1
  }
})

// 在Test路由对应的Test组件中，使用如下方式获取到传递的参数
// views/test/Test.vue
const id = router.params.id // 1

2、query模式

路径参数是以 问号？开头，以 &符号 分割的 序列化字符串，例如：/test2?name=12&id=3

当对应的路由被匹配，它的query值将被保存到对应路由地址的query属性中，通过 router.query 即可拿到对应的参数。

// 定义如下两个路由Test2和Test3
// router/index.js
const routes = [{
	path: '/test2',
  name: 'Test2',
  component: () => import('@/views/test/Tes2.vue')
}, {
	path: '/test3,
  name: 'Test3',
  component: () => import('@/views/test/Test3.vue')
}]

// 如果Test3路由，想要跳转到Test2路由，并且传递参数，如下操作
// views/test/Test3.vue
router.push({
	name: 'Test2',
  query: {
  	name: 12,
    id: 3
  }
})

// 在Test2路由对应的Test2组件中，使用如下方式获取到传递的参数
// views/test/Test2.vue
const id = router.query.id // 3
const name = router.query.name //12

二、路由之间的参数传递与接收

在路由导航的时候，我们只能通过 router.push 传递参数，其他的方式均无法传递参数。

router.push 的参数可以有 四种形式，并且前三种形式是等价的。

// 1.路径字符串形式的路由地址
router.push('/test2?name=12&id=3')

// 2. path + query 方式的路由地址，
// 注意，此方式下，path不能传递params模式的参数
router.push({
	path: '/test2',
  query: {
  	name: 12,
    id: 3
  }
})

// 3. name + query 方式的路由地址
router.push({
	name: 'Test2',
  query: {
  	name: 12,
    id: 3
  }
})

// 4. name + params 方式的路由地址
// 注意，此方式下，需要在路由记录中配置动态参数占位符，例如：path: '/test2/:name/:id'
router.push({
	name: 'Test2',
  params: {
  	name: 12,
    id: 3
  }
})

三、路由向组件的参数传递与接收

路由向组件传递参数的方式和路由之间的传递参数方式是一致的，只是在接收参数的时候有所区别。

组件对外暴露属性的方式是通过props方式进行的，所以，路由向组件传参，即是路由向props传递参数。

我们只需要在routes中配置props相关参数即可实现路由向组件传参，官方文档提供了如下四种配置方式。

1、布尔模式

当路由记录的props属性被设置为true时，路由地址中的router.params将被转为组件的props中的属性。

// router/index.js
// 当props被设置为true时，router.params将被转为组件的props中的属性
const routes = [{
	path: '/test2/:name/:id',
  name: 'Test2',
  component: () => import('@/views/test/Tes2.vue'),
  props: true
}]

// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
	name: [String, Number],
  id: Nuber
})

2、命名视图

对于有命名视图的路由，必须给每一个命名视图路由定义props配置。

// router/index.js
// 需要注意的是，在多个命名视图中，
// 我们必须将命名视图对应的参数一一定义在路由对应的path中
// 例如 /test2/:name/:id/:title
const routes = [{
	path: '/test2/:name/:id/:title',
  name: 'Test2',
  components: {
    default: () => import('@/views/test/Tes2.vue'),
    SideBar: () => import('@/views/test/SideBar.vue')
  },
  props: {
    default: true,
    SideBar: true
  }
}]

// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
	name: [String, Number],
  id: Nuber
})

// 在SideBar.vue中的props可定义如下
// views/test/SideBar.vue
const props = defineProps({
	title: String
})

3、对象模式

如果路由记录中的props是一个对象，会直接将该对象设置为组件的props。

// router/index.js
// 注意，此模式下，不需要用过router.push传参
const routes = [{
	path: '/test2',
  name: 'Test2',
  component: () => import('@/views/test/Tes2.vue'),
  props: {name: 12, id: 3}
}]

// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
	name: [String, Number],
  id: Nuber
})

4、函数模式

路由记录中的props的值也可以是一个函数，它将返回一个props跟组件的props对应，可以看做是对象模式的进阶版。

// router/index.js
// 注意，此模式下，即可以处理router.push传递的参数，也可以不传值，使用静态数据
const routes = [{
	path: '/test2/:name/:id',
  name: 'Test2',
  component: () => import('@/views/test/Tes2.vue'),
  props: route => ({...route.params, title: 'this is title'})
}]

// 在Test2.vue中的props可定义如下
// views/test/Test2.vue
const props = defineProps({
	name: [String, Number],
  id: Nuber,
  title: String
})

四、总结

在使用router.push导航时，建议使用name + query 或者 name + params的方式传递参数，增加项目的可维护性。