[Vue-router]一篇文章看懂Vue路由传参query/param/props

1.路由的query参数

1. 传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
       title:'你好'
		}
	}"
>跳转</router-link>

2.接收参数

import { useRoute } from 'vue-router'
const router = useRoute();
console.log(router.query);

2. 路由的params参数

1. 配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

2. 传递参数 如果是params参数不能用path(path不能匹配到路由，这里用的是name)

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
       title:'你好'
		}
	}"
>跳转</router-link>

3.路由传参props

  {
        path: '/orders', //使用占位符
        name: 'orders',
        component: () => import('@/pages/Order.vue'),
        meta: {
            title: '订单',
        },
        	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
       // props: {
         //   id: 99,
         //   title: 'test'
       // }
        	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
       // props:true
       
       //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}

    // props({query:{id,title}}){ 
    //     return {
    //         id:id,title:title
    //     }
    // }
    }