VUE-路由传参

最新推荐文章于 2023-07-08 22:55:54 发布

Kateri_a

最新推荐文章于 2023-07-08 22:55:54 发布

阅读量175

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/ChenBo8520/article/details/125238185

版权

这篇博客介绍了在Vue Router中如何通过query和params传递参数。query参数以明文方式在URL中显示，而params参数可以用于加密传递且不显示在路径上。在接收参数时，query参数通过$route.query访问，params参数则通过$route.params获取。示例展示了在模板中如何绑定和使用这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在链接的时候直接传递消息，query--get明文传递，params--post加密传递，

但是注意 :to 使用vue的语法，需要绑定v-band

<router-link :to="{path:'/index',query:{un:'aaa',pw:'***'}}">OA入口</router-link>

	<router-link :to="{name:'index',params:{un:'aaa',pw:'***'}}">OA入口</router-link>

接下来在index中接收参数首先看明文方式

参数是在路由中传递，参数需要过路由，所有用$接收，一个对象前习惯加一个$，代表当前vue路由对象中的一个实例

<template>
	<h3>OA系统首页面</h3>
	<hr/>
	
	{{$route.query.un}},
	{{$route.query.pw}}
	
	<!-- {{$route.params.un}},
	{{$route.params.pw}} -->
	<router-link to ="/dept">部门管理</router-link> |
	<router-link to ="/file">文档管理</router-link> |
	<router-link to ="">邮箱管理</router-link>
	
	<br/>
	<router-view></router-view>
</template>

<script>
</script>

<style>
</style>

使用params加密传输时，在链接时需要把path改成name,因为要隐藏路径。

接收的时候使用params接收即可。

<template>
	<h3>OA系统首页面</h3>
	<hr/>
	
	<!-- {{$route.query.un}},
	{{$route.query.pw}}
	 -->
	{{$route.params.un}},
	{{$route.params.pw}}
	<router-link to ="/dept">部门管理</router-link> |
	<router-link to ="/file">文档管理</router-link> |
	<router-link to ="">邮箱管理</router-link>
	
	<br/>
	<router-view></router-view>
</template>

<script>
</script>

<style>
</style>