vue 路由跳转传参

Posted 2021-11-10 whlbook

<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