VUE路由传参的两种方式

VUE路由传参的两种方式

1、使用query传参（类似于get方式）

//跳转地址和携带的参数，跳转的地址path的值需要与路由中的path的值对应
this.$router.push({path: '/test', query: {name: 'tom'}})
//路由表配置
routes = [
    {
        path: '/test'
        name: 'test'
        component: TestComponent
    }
]
//接受传过来的参数
this.$route.query.name

2、使用params传参（类似于post方式）

// 跳转地址和携带的参数，跳转的地址name的值需要与路由中的name的值对应
this.$router.push({name: 'test', params: {name: tom}})
//路由表配置
routes = [
    {
        path: '/test'
        name: 'test'
        component: TestComponent
    }
]
//接受传过来的参数
this.$route.params.name

注意事项：

1、使用params传参，只能使用name写跳转的地址，并且需要与路由中name值相同

2、使用params传参，当跳转页面成功之后，可以获取到传的参数，但是页面刷新之后，传的参数获取不到，变成undefind，可以在路由表对应的路由的path中的添加对应的参数（/:param），这样的话，刷新页面后，不会变成undefind,还可以获取到

3、使用query传参，在路由表对应的路由的path中不需要添加对应的参数（/:param）

4、使用query传参跳转地址也可以使用name，但是需要与路由表中对应的路由中的name匹配