Vue-router路由传参三种方法及区别

时间：2020-10-13 21:17:43 阅读：39 评论：0 收藏：0 [点我收藏+]

先有如下场景点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

<el-button type="primary" @click="handleClick(2)">查看详情</el-button>

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

对应路由配置：

{
   path: ‘/detail/:id‘,
   name: ‘detail‘,
   component: detail
}

获取参数如下：

this.$route.params.id

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

methods：{
  handleClick(id) {
    this.$router.push({
      name: ‘detail‘,
      params: {
        id: id
     }
  })
}

对应路由配置

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

获取参数：

this.$route.params.id

methods：{
  handleClick(id) {
        this.$router.push({
          path: ‘/detail‘,
          query: {
            id: id
          }
     })
 }

对应路由配置：

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

获取参数：

this.$route.query.id

1、接收方式

query传参：this.$route.query.id

params传参：this.$route.params.id

2、路由展现方式

query传参：/detail?id=1&user=123&identity=1&更多参数

params传参：/detail/123

原文：https://www.cnblogs.com/lcxcsy/p/13810920.html

踩

(0)

评论一句话评论（0）

分享档案

更多>