element ui框架（路由参数传递）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        前端开发中，有的时候路由也是需要带参数传递的。不管是窗口登录，还是超链接，一般会带1个或者多个参数。如果是多个参数，通常就用分隔符把它们连接在一起。vue工程下面的参数传递一般是这么解决的，

1、非props传递，

1.1 首先需要在router/index.js中添加传递参数

export default new Router(
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
	
      path: '/Login',
      name: 'Login',
      component: Login
    ,
	
      path: '/Main',
      name: 'Main',
      component: Main,
	  children :[
		  
			  path: '/Member/Level/:id', //id为需要传递的参数
			  name:'MemberLevel',
			  component: MemberLevel,
		  ,
		  
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  
	  ]
    
  ]
)

        如上面一段中文说明，这个时候只需要把参数用冒号割开即可。

1.2 在Main.vue中添加超链接，

        如果是比较简单的办法，直接拼接url即可，比如像这样，

<router-link to="/Member/Level/1">会员等级</router-link>

        另外一种方法就是把to看成是一个json对象，这也是可以的，

<router-link :to="name:'MemberLevel', params:'id':1">会员等级</router-link>

1.3 有了上面的铺垫，那么MemberLevel.vue中使用id就很简单了

<div>会员等级===this.$route.params.id	</div>

2、props传递

2.1 props传递，关键之处在于在router/index.js添加一个props属性

export default new Router(
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    ,
	
      path: '/Login',
      name: 'Login',
      component: Login
    ,
	
      path: '/Main',
      name: 'Main',
      component: Main,
	  children :[
		  
			  path: '/Member/Level/:id', //id为需要传递的参数
			  name:'MemberLevel',
			  component: MemberLevel,
			  props:true   // 添加props属性
		  ,
		  
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  
	  ]
    
  ]
)

        和1.1相比较，这里多了props属性，并且设置为true。

2.2 Main.vue中添加超链接

        这部分和1.2是一样的，不再赘述。

2.3 修改MemberLevel.vue

<template>
	<div>会员等级===id</div>
</template>

<script>
export default 
	props:["id"],
	name:"MemberLevel"


</script>

<style>
</style>

        和router中的index.js一样，在MemberLevel.vue也得添加一个props属性，这样div中就可以直接引用id这个变量了。

3、Login.vue和Main.vue之间的传递

        一般Login之后，都需要把相关传递信息传给Main网页。这个时候就可以用上面1或者2的方法来完成参数传递。不失一般性，可以用非props方法来传递，

 3.1 重新配置router/index.js路由

	
      path: '/Main/:name', //name为需要传递的参数
      name: 'Main',
      component: Main,
	  children :[
		  
			  path: '/Member/Level/:id', //id为需要传递的参数
			  name:'MemberLevel',
			  component: MemberLevel,
			  props:true   // 添加props属性
		  ,
		  
			  path: '/Member/List',
			  name:'MemberList',
			  component: MemberList,
		  
	  ]
    

3.2 修改submitForm函数

		submitForm(formName) 
			//alert('submit!');
			
			this.$refs[formName].validate((valid) => 
				if (valid) 
					this.$router.push(name:"Main",params:"name":this.form.name);
				 else 
					this.$message.error('请输入正确用户名或密码!');
					return false;
				
			);
		

3.3 在Main.vue中引用传递的参数

<span>this.$route.params.name</span>

4、总结

        网页之间传参，是数据传递的重要方式，这部分建议好好掌握。当然，传参只是基础，后续还要对参数进行本地化保存，这也是非常重要的。