vue 路由传参

#math.h

于 2022-02-22 14:07:44 发布

阅读量181

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/gem12581/article/details/123066889

版权

本文介绍了在Vue应用中，通过$router.push()实现路径跳转时，如何使用path和params与query参数传递数据，包括页面刷新保持数据、使用name属性和params，以及利用query在URL中显示参数的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三种基本方式

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

path: '/particulars/:id',

第二种方法 页面刷新数据会丢失
 this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。
 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
子组件中: 这样来获取参数
this.$route.params.id

this.$route.query.id
route.params 而不是router

第三种方法path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }