在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>

 

Logo
View Design

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

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign