使用vue router路由传参刷新页面参数丢失如何解决

本篇文章为大家展示了使用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 后面显示,如图:

使用vue router路由传参刷新页面参数丢失如何解决

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

如果在路由中设置了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)
    }
}

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

上述内容就是使用vue router路由传参刷新页面参数丢失如何解决,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。