Vue中通过URL传递参数

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

ioszhanghui

22838人浏览 · 2019-07-04 17:39:07

ioszhanghui · 2019-07-04 17:39:07 发布

中间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>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport