Vue3 路由传参

1、query（在路径上以?key=value的形式存在，刷新页面数据仍然保留。query可以搭配path或name任意一个配置项使用）

（1）声明式传参

<!-- 
	push 和 replace: 控制路由跳转时操作浏览器历史记录的模式。
    push: 追加历史记录（默认值）。
    replace: 替换当前记录。
    不过这个属性貌似要先放在外层的RouterLink才生效。
-->
<RouterLink
	replace
	:to="{
		path: '/news/detail',
		// name: 'newsDetail',
		query: {
			id: p.id,
			name: p.name,
			age: p.age
		}
	}"
>
</RouterLink>

（2）编程式传参

router.push({
	// path: '/news/detail',
	name: 'newsDetail',
	query: {
		id: p.id,
		name: p.name,
		age: p.age
	}
})

或者

router.replace({
	// path: '/news/detail',
	name: 'newsDetail',
	query: {
		id: p.id,
		name: p.name,
		age: p.age
	}
})

2、params（注意：传参时需要在路由规则中配置占位符）

路由配置占位符

// 路由中配置
{
	name: 'news',
	path: '/news',
	component: News,
	children: [
		{
			name: 'newsDetail',
			// 子路由 path 前面不能带 '/'，即 path: 'detail'，而不是 path: '/detail'
			// 用 name + params 传参需要配置占位符。 '?'问号表示该参数可传可不传
			path: 'detail/:id/:name/:age?',
			component: NewsDetail
		}
	]
}

（1）声明式传参

<RouterLink
	:replace="true"
	:to="`/news/detail/${p.id}/${p.name}/${p.age}`"
>
</RouterLink>

或者

<RouterLink
	:replace="true"
	:to="{
		name: 'newsDetail',
		params: {
			id: p.id,
			name: p.name,
			age: p.age
		}
	}"
>
</RouterLink>

（2）编程式传参

router.push({
  name: 'newsDetail',
  params: {
    id: p.id,
    name: p.name,
    age: p.age
  }
})

或者

router.replace({
  name: 'newsDetail',
  params: {
    id: p.id,
    name: p.name,
    age: p.age
  }
})

3、扩展：路由的props配置及完整传参过程

（1）path + query

（1）传参组件中：
router.replace({
  path: '/news/detail',
  query: {
    id: p.id,
    name: p.name,
    age: p.age
  }
})


（2）路由中配置 props 函数，参数为路由对象
{
  name: 'news',
  path: '/news',
  component: News,
  children: [
    {
      name: 'newsDetail',
      // 子路由 path 前面不能带 '/'，即 path: 'detail'，而不是 path: '/detail'
      path: 'detail',
      component: NewsDetail,
			// props不是必要的，但是写了可以简化接收方接收参数，比如接收方可直接使用 defineProps 接收参数
      props(route) {
        // 将返回结果，即query对象参数，作为props传给路由组件。这样接收方可使用 defineProps 接收参数
        return route.query
      }
    }
  ]
}


（3）接收参数组件中此时可以如下操作：
defineProps(['id', 'name', 'age'])


** 或者不用props，直接从路由中获取参数： **
  import { toRefs } from 'vue';
  import { useRoute } from 'vue-router';
  let { query, params } = toRefs(useRoute())

（2）name + params

（1）传参组件中：
router.replace({
  name: 'newsDetail',
  params: {
    id: p.id,
    name: p.name,
    age: p.age
  }
})


（2）路由中配置 props: true
{
  name: 'news',
  path: '/news',
  component: News,
  children: [
    {
      name: 'newsDetail',
      // 子路由 path 前面不能带 '/'，即 path: 'detail'，而不是 path: '/detail'
      path: 'detail/:id/:name/:age',
      component: NewsDetail,
			// props不是必要的，但是写了可以简化接收方接收参数，比如接收方可直接使用 defineProps 接收参数
      // 将路由接收到的所有params参数作为props传给路由组件。（注意：这种配置只针对name + params传参有效）
      props: true
    }
  ]
}


（3）接收参数组件中此时可以如下操作：
defineProps(['id', 'name', 'age'])


** 或者不用props，直接从路由中获取参数： **
  import { toRefs } from 'vue';
  import { useRoute } from 'vue-router';
  let { query, params } = toRefs(useRoute())