vue 路由传参的几种方式

参数的形式以及如何获取参数:   形式一: /insurance/PM00001/healthInfo?no=123456 使用 this.$route.params   形式二: /insurance/PM00001/healthInfo?no=123456 使用 this.$route.query   传递参数的几种形式:   方式一:url 中使用占位符
{
    path: ':productCode/detail',    // :id,刷新页面,参数不丢失
    name: 'ProductDetail', 
    component: () => import('@/views/Product/Detail/index'), 
}

  

  方式二:params -- 类似于post,参数不在地址中展示,除非使用占位符 ,刷新页面参数丢失
this.$router.push({
    name:"detail",  // 根据 name 来匹配
    params:{
        name:'nameValue',
        code:10011
    }
});

this.$route.params.code

  

  方式三:query -- 类似于get,参数在地址中展示 ,刷新页面参数不丢失  
this.$router.push({
    path:"/detail", // 根据 path 来匹配
    query:{
        name:'nameValue',
        code:10011
    }
});

this.$route.query.code

  

  虽然前端可以通过以上几种方式实现跨页面传参,但是实际中用户行为不可控,一些重要参数,还是考虑从接口获取比较好

上一篇:win10路由


下一篇:Vue+Element-Ui搭建后台管理界面(登录和菜单权限控制[二])