4种路由传参方法
传递参数:在路经上直接利用问号传参,多个参数用&隔开。也可以使用vue2中方法来获取:{{ $route.query.id }}在组件中接收参数:引入useRoute这个API来获取。模板中 console.log(props)在组件中接受参数:引入useRoute这个API来获取。传递参数:在配置路由信息上传属性名。
·
第一种:query(get传参)
传递参数:在路经上直接利用问号传参,多个参数用&隔开
在组件中接受参数:引入useRoute这个API来获取
也可以使用vue2中方法来获取:{{ $route.query.id }}
<template>
<div id="home">
<button @click="add">dian</button>
{{ $route.query.id }}
</div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
setup(){
var route = useRoute()
function add(){
console.log(route.query);
}
return {
add
}
}
}
</script>
控制台输出:
第二种:params传参也叫动态路由传参
传递参数:在配置路由信息上传属性名
在路径上传递属性值
在组件中接收参数:引入useRoute这个API来获取
<template>
<div id="list">
<h1>列表页面</h1>
{{$route.params}}
</div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
setup(props){
var route = useRoute()
console.log(route.params)
return{
route
}
},
}
</script>
控制台输出:
第三种:meta(路由元信息)
在路由配置上传参:
{
path:'/list',
name:'list',
meta:{
xxoo:'xxx' //路由元信息
},
},
在组件中获取;
<template>
<div id="list">
<h1>列表页面</h1>
{{$route.meta}}
</div>
</template>
<script>
import {useRoute} from 'vue-router'
export default {
setup(props){
var route = useRoute()
console.log(route.meta)
return{
route
}
},
}
</script>
控制台输出;
第四种:porps传参
路由配置项里面写:
props:{
name:'刘香',
id:'18岁123'
},
组件中接收:
props:{
id:{
type:string,//约束参数类型
default:'默认参数',//忘记传参的情况下会使用默认参数
required:true
},
name:{
// 和上面的一样
type:String
}
}
模板中 console.log(props)
控制台中输出:
更多推荐
已为社区贡献1条内容
所有评论(0)