vue中组件3种编程式路由跳转传参

Posted 2023-04-21

参考技术A

A组件跳转B组件传参
A组件

路由配置

B组件

A组件跳转B组件传参
A组件

B组件

解决丢失参数问题可用vuex或localstorage存储参数
A组件跳转B组件传参
A组件

B组件

vue 路由跳转传参

<li v-for="article in articles" @click="getDescribe(article.id)">

getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

this.$route.params.id


父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
          name: ‘Describe‘,
          params: {
            id: id
          }
        })

this.$route.params.id


父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
          path: ‘/describe‘,
          query: {
            id: id
          }
        })


对应子组件: 这样来获取参数

this.$route.query.id