上一节：Vue 路由的基本使用

路由的query参数

先看效果

我们需要创建一个 Detail.vue 组件，根据点击的消息来展示消息id和标题

创建路由规则，修改 index.js

......
import Detail from "../pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {......},
        {
            path: '/home',
            component: Home,
            children: [
                {......},
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        },
    ]
})

修改 Message.vue 组件

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!--跳转路由并携带query参数，to的字符串写法-->
        <!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>-->
        <!--跳转路由并携带query参数，to的对象写法-->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        {id: "001", title: "消息001"},
        {id: "002", title: "消息002"},
        {id: "003", title: "消息003"},
      ]
    }
  }
}
</script>

创建 Detail.vue 组件

<template>
<ul>
  <li>消息编号：{{$route.query.id}}</li>
  <li>消息标题：{{$route.query.title}}</li>
</ul>
</template>

<script>
export default {
  name: "Detail"
}
</script>

小结
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.接收参数

$route.query.id
$route.query.title

命名路由

命名路由就是给路由起名字，可以简化代码，增加 name 属性即可。修改 index.js，给 Detail 增加 name 属性：

在 Message 跳转 Detail 时，代码可以简化为：

<router-link :to="{
          name:'xiangqing',
          query:{
            id:m.id,
            title:m.title
          }
        }">

index.js 中给 about 增加 name 属性

App.vue 中

<!--          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>-->
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>

路由的params参数

首先需要配置 index.js，使用占位符 params 参数

export default new VueRouter({
    routes: [
        {......},
        {
            path: '/home',
            component: Home,
            children: [
                {......},
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail
                        }
                    ]
                }
            ]
        },
    ]
})

Message.vue 中传值，使用字符串写法：

<!--跳转路由并携带params参数，to的字符串写法-->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>

或者使用对象写法

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置!

<!--跳转路由并携带params参数，to的对象写法-->
        <router-link :to="{
          name:'xiangqing',
          params:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
        </router-link>

Detail 中取值

  <li>消息编号：{{$route.params.id}}</li>
  <li>消息标题：{{$route.params.title}}</li>

点击消息002时：

props配置

我们关注一个问题，在 Detail 中，我们接收参数时使用 $route.params.id、$route.params.title，如果参数很多，会重复写很多次 $route.params.xxx，为了解决这个问题，就用到了 props 配置

修改 index.js，哪里接收参数就在哪里配置

第一种写法：

children: [
	{
		name:'xiangqing',
        path: 'detail/:id/:title',
        component: Detail,
        //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
        props:{
        	a:1,
            b:"hello"
        }
    }
]

接收时使用 props 接收，使用插值语法读出来即可

<template>
<ul>
  <li>{{a}}{{b}}</li>
</ul>
</template>

<script>
export default {
  name: "Detail",
  props:['a','b']
}
</script>

第二种写法

修改 index.js

children: [
	{
		name:'xiangqing',
        path: 'detail/:id/:title',
        component: Detail,
		//props的第二种写法，值为布尔值
		//若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
        props:true
    }
]

Detail 接收时

<template>
<ul>
  <li>消息编号：{{id}}</li>
  <li>消息标题：{{title}}</li>
</ul>
</template>

<script>
export default {
  name: "Detail",
  props:["id","title"]
}
</script>

第三种写法

第二种写法只适合 params 传参。我们看下第三种写法适合 query。修改 index.js

children: [
	{
		name:'xiangqing',
        path: 'detail/',
        component: Detail,
		//props的第三种写法，值为函数
        props($route){
           return {id:$route.query.id,title:$route.query.title}
        }
        //或简写为结构赋值
        props({query}){
        	return {id:query.id,title:query.title}
        }
        //或接着结构赋值
        props({query: {id, title}}) {
        	return {id, title}
        }
    }
]

Message.vue 中使用 query 传参

<router-link :to="{
          name:'xiangqing',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{ m.title }}
</router-link>

Detail 中接收时仍是同上面一样

<template>
<ul>
  <li>消息编号：{{id}}</li>
  <li>消息标题：{{title}}</li>
</ul>
</template>

<script>
export default {
  name: "Detail",
  props:["id","title"]
}
</script>

小结：路由的props配置
作用：让路由组件更方便的收到参数

{
	name : 'xiangqing',
	path : 'detail/:id',
	component: Detail,
	//第一种写法: props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	//props:{a: 900}
	//第二种写法: props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props :true
	//第三种写法:props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id : route.query.id,
			title:route.query.title
		}
	}
}

下一节：Vue 编程式路由导航

具体代码如下所示：

场景：

<div @click='toDetail'>查看详情</div>

路由传参不能直接传一个对象，需要使用JSON.stringify()方法将其转换成一个字符串，然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象

const router = useRouter()

const toDetail = () => {
	// 我使用的是Vue3，router要从useRouter获取
	router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } })
}

接收路由参数

1. Vue3接收

import { useRoute } from "vue-router";

setup() {
	const route = useRoute()
	const data = JSON.parse(route.params.list)
}

2. Vue2接收

let data = this.$route.params.list
data = JSON.parse(data)