0304路由的传参和取参

最新推荐文章于 2024-05-26 14:45:36 发布

wnashi_万石

最新推荐文章于 2024-05-26 14:45:36 发布

阅读量157

点赞数

分类专栏： 002_Vue零基础

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114343644

版权

002_Vue零基础专栏收录该内容

14 篇文章

订阅专栏

001_0304路由的传参和取参(h3)

查询参
- 配置（传参） :to="{name:‘login’,query:{id:loginid}}"
- 获取（取参） this.$route.query.id
路由参数
- 配置（传参） :to="{name:‘register’,params:{id:registerid} }"
- 配置路由的规则 { name:‘detail’,path:’/detail/:id’}
- 获取 this.$route.params.id
总结
- :to传参的属性里 params是和name配对的 query和name或path都可以
- 使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失
- js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题
- 解决方案：<router-view :key="$route.fullPath"></router-view>
源代码

<!DOCTYPE html>
<html>
<head>
	<title>路由的跳转</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="../js/vue.js"></script>
	<!-- 引入路由插件 -->
	<script type="text/javascript" src="../js/vue-router.js"></script>
	<script type="text/javascript">
		var Login={
			template:`
				<div>我是登录页面 
					<span>这是我获取到的参数： {{ msg }}</span>
				</div>
			`,
			data(){
				return { 
					msg:''
				}
			},
			created(){
				this.msg=this.$route.query.id
			}
		}
		var Restiger={
			template:`
				<div>我是注册页面
					<span>这是我获取到的路由参数：{{ foo }}</span>
				</div>
			`,
			props:['foo']
			// data(){
			// 	return {
			// 		restigerfoo:''
			// 	}
			// },
			// created(){
			// 	this.restigerfoo=this.$route.params.foo
			// }
		}
		//安装路由插件
		Vue.use(VueRouter);
		//创建路由对象
		var router= new VueRouter({
			//配置路由对象
			routes:[
				{path:'/login',name:'login',component:Login},
				{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
			]
		})
		new Vue({
			el:'#app',
			router,
			template:`
				<div>
					<router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>
					|
					<router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>
					<button @click='jslink'>js跳转去登录</button>
					<router-view :key="$route.fullPath"></router-view>
				</div>
			`,
			data(){
				return {}
			},
			methods:{
				//js跳转传参是一样的
				jslink(){
					this.$router.push({name:'login',query:{id:'456'}})
				}
			}
		})
	</script>
</body>
</html>

浏览器界面