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

绝地灬酷狼 2022-09-08 03:52 181阅读 0赞

# 说明  #

> 点击列表的详情，跳转到详情内页，在内页根据传递的参数获取详情数据
> 
> 刷新页面参数丢失

# 编程式导航 #

## 方法一：通过 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?

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBASmFja2llRFlI_size_7_color_FFFFFF_t_70_g_se_x_16][]

##  方法二：通过 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)
        }
    }

详见官方文档：**[动态路由匹配][Link 1]    [路由组件传参][Link 2]**

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBASmFja2llRFlI_size_7_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/0b1398b72aae4dc1b4c64c737d3caaea.png
[Link 1]: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
[Link 2]: https://router.vuejs.org/zh/guide/essentials/passing-props.html