Vue-路由传值

在路由中传值有两种传值方式:

query查询参数传值
  1.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由path字段负责, 传递的值由query字段负责
  1.2 query方式传递的值会以键值对的形式拼接到网址的后面, 与get请求传递数据的格式类似
  1.3 query方式传递的值, 刷新页面, 值不会消失
  1.4 query方式传值, 不需要去配置routes数组里的对应对象

params路径参数传值
  2.1 router-link的to属性或者js方式push方法里的参数由字符串更换成对象, 需要切换的路由由name字段负责, 传递的值由params字段负责
  2.2 params方式传递的值会以路径的形式拼接到网址的后面
  2.3 params方式传递的值, 刷新页面, 值会丢失
  2.4 params方式传值, 需要去配置routes数组里的对应对象, 需要给对象多加一个name字段, 还需要将path字段修改成 “/路由/:值1/:值2/:…”

//传值
methods:{
      goMyOrder(){
             this.$router.push({name:"box", params:{id:"667788"}}).catch(err=>{});
      }
}

//接收值
computed:{
     getId(){
         return this.$route.params.id
     }
}

//路由配置
 { path:"Box1/:id",
   name:"box", 
   component: ()=>import("../views/login/Box1") 
 }

  

posted @ 2022-09-12 23:10  前端小白银  阅读(253)  评论(0编辑  收藏  举报