路由组件传参解耦方式:
一, 布尔模式: 只在 params 传参下有效
- {
- path: '/orderDetail/:id',
- name: 'orderdetail',
- component: () => import('../components/orderDetail.vue'),
- meta: { showTabbar: false},
- props:true
- }
- // 传参
- gotoDetail(){
- this.$router.push({name:`orderdetail`,params:{id:this.id}})
- }
- // 参数接收
- props: ['id'],
- mounted(){
- console.log(this.id,'id')
- },
二, 对象模式: props 是静态时比较有用
- {
- path: '/orderDetail/:id',
- name: 'orderdetail',
- component: () => import('../components/orderDetail.vue'),
- meta: { showTabbar: false},
- props:{newsletterPopup:false} // 设置静态的 props, 实际项目中动态 props 比较多
- }
- //orderDetail 中参数接收
- props: {
- newsletterPopup: {
- type: Boolean,
- default: false
- }
- },
- mounted(){
- console.log(this.newsletterPopup,'pop')
- },
三, 函数模式: 创建一个函数返回 props, 将路由传的值与静态的 props 值结合; 对 params 和 query 传参均可
- {
- path: '/orderDetail',
- name: 'orderdetail',
- component: () => import('../components/orderDetail.vue'),
- meta: { showTabbar: false},
- props:route =>
- ({
- newsletterPopup:false, // 将静态的值和动态的值都进行 props 解耦
- query:route.query.id
- })
- }
- // 传参
- gotoDetail(){
- this.$router.push({path:`/orderDetail`,query:{id:this.id}})
- }
- // 参数接收
- props: {
- newsletterPopup: {
- type: Boolean,
- default: false
- },
- query:{
- type: String,
- default: ''
- }
- },
- mounted(){
- console.log(this.newsletterPopup,'---',this.query,'pop')
- },
来源: http://www.bubuko.com/infodetail-3776878.html