vue 路由4种传参方式

一、router-link路由导航

<router-link to="/a/123">routerlink传参</router-link>

路由配置:：{path: '/a/:num', name: A, component: A}

地址栏中的显示:：http://localhost:8080/#/a/123

二、调用$router.push实现路由传参

this.$router.push({
      path: `/d/${id}`
})

路由配置:：{path: '/d/:id', name: D, component: D}

地址栏中的显示:：http://localhost:8080/#/d/123

三、通过query来传递参数

this.$router.push({
    path: '/c',
    query: {
       sometext: '1'
    }
})

路由配置: （不需要做任何修改）{path: '/c', name: 'C', component: C}
地址栏中的显示: http://localhost:8080/#/c?sometext=1

四、通过路由属性中的name匹配路由，再根据params传递参数

this.$router.push({
    name: 'B',
    params: {
       sometext: '1'
    }
})

路由配置: 路径后面不需要再加传入的参数，但是name必须和父组件中的name一致
{path: '/b', name: 'B', component: B}

地址栏中的显示: 可以看出地址栏不会带有传入的参数，且再次刷新页面后参数会丢失
http://localhost:8080/#/b