Vue初学——路由2.定义参数并传递

最新推荐文章于 2023-04-05 19:50:03 发布

尖兵果子

最新推荐文章于 2023-04-05 19:50:03 发布

阅读量731

点赞数

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

本文链接：https://blog.csdn.net/wfy17030212/article/details/122325777

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
一、传递参数的第一个方式——$route.query
二、传递参数的第二个方式——$route.params
总结

前言

前面介绍了路由的基本使用，现在来讲一下路由的参数如何传递

一、传递参数的第一个方式——$route.query

$route是路由的一个对象，它其中有着路由的路径，路由传递的参数等

在这里插入图片描述

这里不难发现，我以/register?name=jianbingguozi这种形式传递路由，也就是get方式，在$route这个对象中接受这种形式传递参数的一个对象是query,因此，只需要找到$route这个对象中的query,再找到这个下面的键，也就是这里的name，即可拿到路由过去的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../vue-router.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<button @click="printItem()">ha</button>
			<router-link to="/login?id=10">登录</router-link>
			<router-link to="/register?name=jianbingguozi">注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		let login={
			template:'<h1>login--{{$route.query.id}}</h1>'
		}
		
		let register={
			template:'<h1>register--{{$route.query.name}}</h1>'
		}
		
		let routerObj=new VueRouter({
			routes:[
				{path:'/login',component:login},
				{path:'/register',component:register}
			]
		})
	
		let vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				printItem()					
				{
					console.log(this.$route.query);
				}
			},
			router:routerObj
		});
	</script>
</html>

二、传递参数的第二个方式——$route.params

在这里插入图片描述
这里通过/register/jianbing直接传递参数jianbing,这种形式需要在定义VueRouter对象的时候改变下路径的值，如下

let routerObj=new VueRouter({
	routes:[
		{path:'/login/:id',component:login},
		{path:'/register/:name',component:register}
	]
})

而非是下面

let routerObj=new VueRouter({
	routes:[
		{path:'/login',component:login},
		{path:'/register',component:register}
	]
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../vue-router.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<button @click="printItem()">ha</button>
			<router-link to="/login/12">登录</router-link>
			<router-link to="/register/jianbing">注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		let login={
			template:'<h1>login--{{$route.params.id}}</h1>'
		}
		
		let register={
			template:'<h1>register--{{$route.params.name}}</h1>'
		}
		
		let routerObj=new VueRouter({
			routes:[
				{path:'/login/:id',component:login},
				{path:'/register/:name',component:register}
			]
		})
	
		let vm=new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				printItem()					
				{
					console.log(this.$route.params);
				}
			},			
			router:routerObj
		});
	</script>
</html>