一、传递参数有两种类型 params 和 query
方式一 直接加载URL后面
<!-- 传递参数有两种类型 params和query --> <!-- params的类型 --> <!-- 配置路由格式 /router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路径/router/123--> <!-- 获取:通过$route.params.id -->
使用v-bind绑定数据加在路由后面
<router-link v-bind:to="‘/user/‘+userId">用户</router-link>
方式二
<!-- 方式二 query 配置路由格式/router 传递的方式:对象中使用query的key作为传递方式 传递后形成的路径/router?id=123,/-->
在url后面添加query类
<router-link :to="{path:‘/profile‘,query:{name:‘lixiaopei‘,age:‘18‘,height:‘1.75‘}}">档案</router-link>
方式一与方式二都可以通过绑定事件来实现
aboutClick(){ this.$router.push(‘/about‘) }, profileClick(){ this.$router.push({ path:‘/profile‘,query:{name:‘lixiaoxiaopei‘,age:‘18‘,height:‘1.75‘} }) }
二、取出参数的方法
第一种方式 通过使用当前路由对象的params来获得
computed: { userId(){ return this.$route.params.userId//route并非router route是取当活跃的那个路由 }
第二种方式 通过当前路由对象的query来获得·
computed: { userId(){ return this.$route.query.name//route并非router route是取当活跃的那个路由 } },
原文:https://www.cnblogs.com/LazyPet/p/12175578.html