三、【Vue-Router】路由传参 query

三、路由传参 query

1、需求：传参

---

2、项目结构

---

3、CODE

1、router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import Others from '../views/Others'
import Home from '../views/Home'
import News from '../views/News'
import Message from '../views/Message'
import Details from '../views/Details'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[ // 路由器管理的是什么呀？肯定是路由啊，全在这了！
		{ // 一级路由
			path: '/others',
			component: Others
		},
		{ // 一级路由
			path: '/home',
			component: Home,
			children:[ // 为什么是数组？你凭什么断定他就只能生一个娃？
				{ // 二级路由
					path: 'news', // 数组里的就不用加'/'了，路由器遍历的时候自动加上了
					component: News,
				},
				{ // 二级路由
					path: 'message',
					component: Message,
					children: [
						{ // 三级路由
							path: 'details',
							component: Details,
						},
					]
				}
			]
		}
	]
})

2、Message.vue (参数在这里往下一级传)

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

<script>
	export default {
		name:'Message',
		data(){
			return {
				messageList:[
					{ id: '001', title: '小道消息', desc: '介个就是小道消息'},
					{ id: '002', title: '大道消息', desc: '介个就是大道消息'},
					{ id: '003', title: '大道消息Plus', desc: '介个就是大道消息Plus'}
				]
			}
		}
	}
</script>

3、Details.vue

<template>
	<ul>
		<li>消息标题：{{$route.query.title}}</li>
		<li>消息内容：{{$route.query.desc}}</li>
	</ul>
</template>

<script>
	export default {
		name:'Details',
        mounted(){
            console.log(this.$route)
        }
	}
</script>

---

4、Result

---

5、路由的query参数总结

1. 传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${id}&title=${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