路由传参常见的几种方式
$router.push() 普通传参 跟 配置path加props动态传参
一、$router.push()普通传参
1.query属性:值为一个对象 使用$route.query拿到值
this.$router.push({
name:name / path:path
query:{
id:id,
age:'男'
}
}) //在组件当中使用 this.$route.query 拿到 {id:id, age:'男'} 对象
2.params属性:值一个对象 但是只能搭配name使用, 使用$route.params拿到值
this.$router.push({
name:name 不能使用path:path
params:{
id:id,
age:'男'
}
}) //在组件当中使用 this.$route.params 拿到 {id:id, age:'男'} 对象
二、动态传参
1.配置path上拼接:key $router.params.key拿值
const routes=[{
path:'/:id'}] //配置文件中...
this.$router.push({
path:'/001' }) //跳转文件当中直接输入参数...
this.$route.params.id //如何获取值...
2.配置添加props属性
const routes=[{
path:'/:id',props:true }] //配置文件中...
this.$router.push({
path:'/001' }) //跳转文件当中直接输入参数...
props:{
id:{
type:Number} } //在组件当中就可以直接以组件传值的方式来接收,调用时也不会使用到router,也就是所说的解耦
*如果不使用props,获取值时就会使用到router,那么组件就和路由耦合了
*耦合性:就是两对象之间起到了互相依赖的作用,增加了维护的成本
三、compoents vue中自置标签
通过is属性值来灵活决定要使用的组件,值就是你所要使用的那个组件的名称
<components is='who' /> //使用组件
export default {
data(){
return {
who:'component1' //定义变量
}},
components:{
component1:component1,
component2:component2, //注册
component3:component3
}
}