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

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

1、非props传递，

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

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

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属性

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

2.2 Main.vue中添加超链接

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

2.3 修改MemberLevel.vue

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

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

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

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

3.2 修改submitForm函数

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

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

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

Recommend