vue-router 的redirect参数传递

Yaki丶
  • 13

1、vue-router 做嵌套路由传值的时候,跳转到product页面的时候,已经能够收到传过来的值,但是我想跳的是默认ProA ,做了redirect重定向,能够跳转到ProA页面,但是product获取不到传过来的值,比如说id的值,这种情况要怎么解决?

 routes: [{
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: '/product/:id',
            name: 'Product',
            redirect: '/product/:id/producta',
            component: Product,
            children: [{
                path: 'producta',
                name: 'ProA',
                component: ProA
            }, {
                path: 'productb',
                name: 'ProB',
                component: ProB
            }, {
                path: 'productc',
                name: 'ProC',
                component: ProC
            }]
        }
    ]
回复
阅读 9.5k
2 个回答
stardew
  • 6.1k
routes: [{
            path: '/',
            name: 'Index',
            component: Index
        },
        {
            path: '/product/:id',
            name: 'Product',
            redirect: '/product/producta/:id',
            component: Product
        },
        {
            path: '/product/producta/:id',
            name: 'ProA',
            component: ProA
        }, {
            path: '/product/productb',
            name: 'ProB',
            component: ProB
        }, {
            path: '/product/productc',
            name: 'ProC',
            component: ProC
        }
    ]
YanCore
  • 1
新手上路,请多包涵

首先因为id是是PathValue,'/product/:id'、'/product/:id/producta',id的值你是能够获取到的。
而其他属性,可以使用下面两种方式传参。
采用params的方式传参。

routes: [
        {
            path: '/product/:id',
            name: 'Product',
            // 1.改这里
            redirect: {name:'/product/:id/producta'},
            component: Product,
            children: [{
                path: 'producta',
                // 2.改这里
                name: '/product/:id/producta',
                component: ProA
            }]
        }
    ]
    
    //使用时,
   this.$router.push({
      name: '/product/:id/producta',
      params: {
        id: id,
        other: other
      }
    })    

你这种写法得采用query传参的方式,重定向后的页面是能够获取到query的参数的。访问/product/1?x=1,重定向后/product/1/producta?x=1。

routes: [
        {
            path: '/product/:id',
            name: 'Product',
            redirect: '/product/:id/producta',
            component: Product,
            children: [{
                path: 'producta',
                name: 'ProA',
                component: ProA
            }]
        }
    ]
    //使用时,
   this.$router.push({
      path: '/product/'+id,
      query: {
        other: other
      }
    })   
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏