Vue中通过URL传递参数

最新推荐文章于 2024-10-11 09:11:17 发布

原创最新推荐文章于 2024-10-11 09:11:17 发布 · 2.3w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #URL传递参数

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍在Vue中如何利用URL参数实现页面跳转，通过具体代码示例展示如何在链接地址中传递参数，并在目标页面中解析这些参数。

在Vue中，除了使用push 和<router-link :to=''></router-link>进行页面跳转和参数传递之外，还可以使用URL链接进行参数传递，这些参数携带在链接地址后面，比如：/Users/xiaofeiniao/Desktop/Vue/URLParam.html#/home/10001/oo/www.baidu.com，

中间10001 ，oo,www.baidu.com都是在地址中传递的参数，而home是其中的一个子路由，

HTML的测试代码如下：

<html>
<head>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<style>

button{

	width: 100px;
	height: 50px;
	background-color: red;
}
</style>

</head>
<body>
	<div id='app'>
		<router-view/>
	</div>
<script>

var helloworld ={
	template:'<div><h1>{{headTitle}}</h1><button @click="gotoPage">跳转到子页面</button><router-view/></div>',
	data:function(){
		return{
			headTitle:'999',
			params:{
				id:10001,
				name:'oo',
				imageUrl:'www.baidu.com'
			}
		}
	},
	methods:{
		gotoPage:function(){
			console.log(this);
			console.log('页面跳转'+JSON.stringify(this.params));
			this.$router.push({
				path:'/home/'+this.params.id+'/'+this.params.name+'/'+this.params.imageUrl
			});
		}
	}
}

var childTemplate ={
	template:'<p>{{$route.params.id}}{{$route.params.name}}{{$route.params.imageUrl}}</p>',
	props:['params'],
	beforeRouteEnter:function(from,to,next){
		console.log('页面进入');
		console.log(from);
		console.log(to);
		next();
	}
}

var router = new VueRouter({
	routes:[
	{
		path:'/',
		component:helloworld,
		children:[
		{
			path:'/home/:id/:name/:imageUrl',
			component:childTemplate,
			name:'childTemplate'
		}
		]
	}

	]
})

new Vue({
	el:'#app',
	data:function() {
	return {
		headTitle:"头部标题"
	}	
	},
	router:router

})

</script>

</body>
</html>

在传递过来的模板页面，可以通过$route.params来获取，比如在上面代码中获取

<p>{{$route.params.id}}{{$route.params.name}}{{$route.params.imageUrl}}</p>