【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：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、总结文章来源：https://www.toymoban.com/news/detail-423607.html
网页之间传参，是数据传递的重要方式，这部分建议好好掌握。当然，传参只是基础，后续还要对参数进行本地化保存，这也是非常重要的。文章来源地址https://www.toymoban.com/news/detail-423607.html
到了这里，关于element ui框架（路由参数传递）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
