vue-router传参的四种方式超详细

Posted 2023-03-23 秋田君

vue路由传参的四种方式

一、router-link路由导航方式传参

父组件：<router-link to="/跳转到的路径/传入的参数"></router-link>
子组件：this.$route.params.content接受父组件传递过来的参数

例如：
路由配置：

bashbashpath:'/father/son/:num',name:A,component:A```

地址栏中的显示：

http://localhost:8080/#/father/son/44

调用方法：

<router-link to="/father/son/传入的参数">父亲组件<router-link>
 子组件通过  this.$route.params.num 接受参数

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

父组件：通过实践触发，跳转代码

<button @click="clickHand(123)">push传参</button>
  methods: 
    clickHand(id) 
      this.$router.push(
        path: `/d/$id`
      )
    
  

路由配置

path: '/d/:id', name: D, component: D

地址栏中显示：

http://localhost:8080/d/123

子组件接受参数方式

mounted () 
  this.id = this.$route.params.id

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

父组件：

<button @click="ClickByName()">params传参</button>
    ClickByName() 
      this.$router.push(
        name: 'B',
        params: 
          context: '吴又可吴又可吴又可'
        
      )
    

路由配置：路径后不需要在加上传入的参数，但是name必须和父组件中的name一致

path: '/b', name: 'B', component: B

地址栏中的显示：地址栏不会带有传入的参数，而且再次刷新页面后参数会丢失

http://localhost:8080/#/b

子组件接收参数的方式：

<template>
  <div id="b">
    This is page B!
    <p>传入参数：this.$route.params.context</p>
  </div>
</template>

四、通过query来传递参数

父组件：

<button @click="clickQuery()">query传参</button>
    clickQuery() 
      this.$router.push(
        path: '/c',
        query: 
          context: '吴又可吴又可'
        
      )
    

路由配置：不需要做任何修改

path: '/c', name: 'C', component: C

地址栏中的显示(中文转码格式)：

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

子组件接受方法：

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: this.$route.query.context</p>
  </div>
</template>

工作中经常用的也就是上面的几种传参方式,完结~ 欢迎点赞收藏哦

vue-router路由传参的几种方式-案例

说明 

点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据

刷新页面参数丢失

编程式导航

方法一：通过 params 传参

路由配置如下

{ 
    path: '/detail/:id',  //若id后面加?代表这个参数是可选的
    name: 'detail', 
    component: Detail 
}

• 通过 $router.push 中 path 携带参数的方式

// 列表中的传参
goDetail(row) {
    this.$router.push({
        path: `/detail/${row.id}`
    })
}

// 详情页获取参数
this.$route.params.id

• 通过 $router.push 的 params 传参

// 列表页传参
goDetail(row) {
    this.$router.push({
        name: 'detail',
        params: {
            id: row.id
        }
    })
}

// 详情页获取
this.$route.params.id

注：这种方式的传参，路径用 name，路径用 name，路径用 name , 用 path 会获取不到；如果在路由配置中没有添加 /:id 即 path: 'detail'，url 中不会显示 id，在详情页还是可以拿到参数 id，但刷新后参数丢失。

以上这两种方式，传递的参数 id 会在 url 后面显示

传递的参数会暴露在网址中。

如果在路由中设置了params参数 /:id，但是在跳转的时候没有传递参数，会导致页面没有内容或跳转失败，可在后面加 ？代表这个参数是可选的，即 /:id?

 方法二：通过 query 传参

// 路由配置
{ 
    path: '/detail', 
    name: 'detail', 
    component: Detail 
}

// 列表页
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 详情页
this.$route.query.id

 注：这种方式传递的参数会在地址栏的 url 后面显示 ?id=?，类似于 get 传参；query 必须配合 path 来传参。

传递的参数是对象或数组

还有一种情况就是，如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，刷新后也获取不到对象值。

此时可以通过 JSON.stringify() 方法将要传递的参数转换为字符串传递，在详情页再通过 JSON.parse() 转换成对象。

let parObj = JSON.stringify(obj)
this.$router.push({
    path: '/detail',
    query: {
        'obj': parObj
    }
})

// 详情页
JSON.parse(this.$route.query.obj)

这个方法虽然可以传递对象，若数据少还好，数据多的话地址栏就很长了

注意：在所有的子组件中获取路由参数是 $route 不是 $router

以上 params 和 query 传参方式对比：

• 通过 $router.push 的 params + name 传参，若路由中没有设置params参数，参数不会拼接在路由后面，但是页面刷新参数会丢失。
• 通过 $router.push 中 path 携带参数或通过 query 传参，参数会拼接在地址后面，会暴露信息。

方法三：使用 props 配合组件路由解耦

// 路由配置
{ 
    path: '/detail/:id',
    name: 'detail', 
    component: Detail,
    props: true // 如果props设置为true，$route.params将被设置为组件属性
}

// 列表页
goDetail(row) {
    this.$router.push({
        path: '/detail',
        query: {
            id: row.id
        }
    })
}

// 详情页
export default {
    props: {
        // 将路由中传递的参数id解耦到组件的props属性上
        id: String
    },
    mounted: {
        console.log(this.id)
    }
}

详见官方文档：动态路由匹配    路由组件传参

此外，还可以通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数丢失的问题，具体结合实际项目即可