携带query参数

1. 传递参数
   【方式一：通过查询字符串直接拼接在路径后面】
   【方式二：传递一个对象，路径是path属性，拼接的参数是query属性，推荐】

   <template>
   	<div>
   		<ul>
   			<li v-for="item in dataList" :key="item.id">
   				<!-- 方式一：模板字符串拼接 -->
   				<router-link :to="`/list/detail?id=${item.id}&title=${item.title}&content=${item.content}`">进入{{item.title}}，查看详情</router-link>
   				<!-- 方式二：对象写法 -->
   				<router-link :to="{
   					path: '/list/detail',
   					query: {
   						id: item.id,
   						title: item.title,
   						content: item.content
   					}
   				}">进入{{item.title}}，查看详情</router-link>
   			</li>
   		</ul>
   		<router-view></router-view>
   	</div>
   </template>
   <script>
   	name: 'List',
   	data() {
   		return {
   			dataList: [{
   				id: 1,
   				title: '标题1'，
   				content: '内容1'
   			}, {
   				id: 2,
   				title: '标题2',
   				content: '内容2'
   			}, {
   				id: 3,
   				title: '标题3',
   				content: '内容3'
   			}]
   		}
   	}
   </script>
   

2. 接收参数
   【直接在$route.query中获取】

   <template>
   	<div>
   		<p>id：{{$route.query.id}}</p>
   		<p>标题：{{$route.query.title}}</p>
   		<p>内容：{{$route.query.content}}</p>
   	</div>
   </template>
   <script>
   export default {
   	name: 'Detail'
   }
   </script>
   

携带params参数

1. router/index.js
   【需要在router中配置path、name】

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   Vue.use(VueRouter);
   export default new VueRouter({
   	routes: [{
   		name: 'xiangqing',
   		path: '/detail/:id/:title/:content',   // 需要通过这种方式给参数占个坑
   		component: 'Detail'
   	}]
   });
   

2. 传递参数

   <template>
   	<div>
   		<router-link to="/detail/001/标题/内容">进入详情</router-link>  <!-- 字符串方式 -->
   		<router-link :to="{
   			name: 'xiangqing',
   			params: {
   				id: '001',
   				title: '标题',
   				content: '内容'
   			}
   		}">进入详情</router-link> <!-- 使用对象方式时，只能使用name属性，不能使用path -->
   	</div>
   </template>
   

3. 接收参数

   <template>
   	<div>
   		<p>id: {{$route.params.id}}</p>
   		<p>标题：{{$route.params.title}}</p>
   		<p>内容：{{$route.params.content}}</p>
   	</div>
   </template>
   

上述接收参数的方式存在代码冗余，利用props方式接收query、params参数，简化代码

1. 在router/index.js中配置props属性

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import List from '@/pages/List';
   import Detail from '@/pages/Detail'
   Vue.use(VueRouter);
   export default new VueRouter({
   	routes: [{
   		path: '/list',
   		component: List,
   		children: [{
   			path: 'detail',
   			component: Detail,
   			props: true,    // props设置为true，在组件中只能接收params方式传过来的参数，query参数无法获取
   			props($route) {  // props为函数，功能强大，query、params参数都可以获取
   				return {
   					id: $route.query.id,
   					title: $route.query.title,
   					content: $route.query.content
   				}
   				// 或者
   				return {
   					id: $route.params.id,
   					title: $route.params.title,
   					content: $route.params.content
   				}
   			}
   		}]
   	}]
   });
   

2. 接收参数

   <template>
   	<div>
   		<p>id: {{id}}</p>
   		<p>title: {{title}}</p>
   		<p>content: {{content}}</p>
   	</div>
   </template>
   <script>
   export default {
   	name: 'Detail',
   	props: ['id', 'title', 'content']
   }
   </script>