Vue Router携带并接收query、params参数方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue Router携带并接收query、params参数方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

携带query参数

传递参数
【方式一：通过查询字符串直接拼接在路径后面】
【方式二：传递一个对象，路径是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>

接收参数
【直接在$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参数

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'
	}]
});

传递参数

<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>

接收参数

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

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

在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
				}
			}
		}]
	}]
});

接收参数文章来源地址https://www.toymoban.com/news/detail-642531.html

<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>