路由传递参数的两种方式 [web前端][Vue框架]

最新推荐文章于 2024-05-14 12:27:01 发布

96岁对抗java

最新推荐文章于 2024-05-14 12:27:01 发布

阅读量687

点赞数

分类专栏： web前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57001006/article/details/125156815

版权

web前端专栏收录该内容

91 篇文章 1 订阅

订阅专栏

路由传递参数的两种方式

前面的时候我们经常会看到导航栏中的输入地址后面加了一个? , 后面就是一些参数, 那么这里我们就来讲解我们如果通过路由来传递参数

以前的时候我们讲过使用http方式下的get请求方式的时候请求参数就是在导航栏的URL后面的?后面加, 那么其实这种方式就是我们通过http协议向一个地址发送了一个请求, 而我们此时讲的使用路由传递参数就是指将我们想要传递的参数通过导航栏传递给路由绑定的组件, 然后从组件中获取发送过来的参数

第一种方式传递采参数:(传统方式)

通过?(问号)的形式拼接参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>传统方式传递路由参数</title>
		<!-- 导入vue.js文件 -->
		<script src="../../js/Vue.js"></script>
		<!-- 导入vue-router.js文件 -->
		<script src="../../js/vue-router.js"></script>
	</head>
	<body>
		<div id = "app">
		<router-view></router-view>
		<router-link to = "/login?id=21&name=zhangsan">我要登录</router-link>
		</div>
		<script>
			
			
			// 创建组件对象
			const login = {
				template : "<div><h1>登录组件 id===>{{this.$route.query.id}} name===>{{this.$route.query.name}}</h1></div>",
				data(){
					
				},
				methods:{
					
				},
				created(){
					console.log("登录组件中id: "+ this.$route.query.id + "登录组件中name: " + this.$route.query.name);
				}
			}
			
			// 创建路由对象
			const router = new VueRouter({
				routes : [
					{
						path:"/login",component:login
					}
				]
			})
			
			// 创建vue核心对象
			const vue = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				},
				router:router
			})
		</script>
		
	</body>
</html>

小结:

我们的组件和Vue一样都是有声明周期的, 那么也就有相应的声明周期钩子函数, 我们在组件中created声明周期钩子函数中可以获取到路由传递过来的参数
- 我们在组件中可以通过this.$route.query.参数名获取到传递过来的参数值
我们在created()生命周期钩子函数中使用console.log(this)输出this之后可以发现这个this是一个VueComponent对象, 这个对象中有一个 $r o u t e 对象, 在$ route对象中又有一个query对象,在这个query对象中有两个属性和属性值的名值对结构, 也就是两个属性, id : 21 和 name : zhangsan
- 所以我们就可以通过this. $r o u t e . q u e r y . i d 在组件对象中获取到通过路由传递过来的 i d 属性值, 通过 t h i s .$ route.query.name在组件对象中获取到通过路由传递过来的name属性值
这种传统方式之下传递参数是通过向路由地址后面拼接?的方式, 就和get请求方式之下传递参数是一样的

第二种方式传递参数:(restful方式):

后端的SpringMVC中也有这种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>restful方式传递参数</title>
		<!-- 导入vue.js文件 -->
		<script src="../../js/Vue.js"></script>
		<!-- 导入vue-router.js文件 -->
		<script src="../../js/vue-router.js"></script>
	</head>
	<body>
		<div id = "app">
			<router-view></router-view>
			<router-link to = "/register/24/张三">我要注册</router-link>
		</div>
		
		<script>
			// 通过使用路径方式传递参数
			
			// 创建组件对象
			const register = {
				// 这里使用了插值表达式的方式将我们传过来的参数从VueComponent对象中取了出来
				template : "<h1>用户注册 姓名:{{this.$route.params.name}}, 年龄:{{this.$route.params.id}}</h1>",
				data(){
					// 这里要注意: 我们的组件中的data属性必须要是一个函数, 不能是一个对象, 如果
					// 是一个对象, 那么在复用的时候就会出错
				},
				created(){
					console.log("注册组件中id:" + this.$route.params.id + "注册组件中name: " + this.$route.params.name)
				}
			}
			
			// 创建路由对象
			const router = new VueRouter({
				routes : [
					{
						path:"/register/:id/:name",
						component : register,
					}
				]
			})
			
			// 创建Vue核心对象
			const vue = new Vue({
				el: "#app",
				data : {
					
				},
				methods :{
					
				},
				router:router
			})
			
		</script>
	</body>
</html>

小结:

我们通过这种restful方式传递的参数会封装到VueComponent对象的$route对象中的params对象中, 然后封装到对应的属性中
我们通过restful方式传递的参数名由创建的路由对象的在配置path(路由路径)时设置, 具体的传递的参数值我们也是在地址栏中拼接, 但是不是使用?拼接, 而是使用/进行拼接
- 也就是在配置路由路径的时候是以路径的形式传递的参数

补充:

由于我们的JavaScript代码执行的时候是从上向下依次执行的, 所以如果我们要创建一个路由并且绑定一个组件对象A, 那么我们一定要先创建出这个路由对象A之后才能进行绑定

96岁对抗java

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
路由传递参数的两种方式 [web前端][Vue框架]

前面的时候我们经常会看到导航栏中的输入地址后面加了一个? , 后面就是一些参数, 那么这里我们就来讲解我们如果通过路由来传递参数小结:我们的组件和Vue一样都是有声明周期的, 那么也就有相应的声明周期钩子函数, 我们在组件中created声明周期钩子函数中可以获取到路由传递过来的参数...
复制链接

扫一扫