路由传参的方式

  • 路由传参的方式已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式。

传参又分为声明式和编程式

方式一params(url显示参数)

声明式router-link

// 子路由配置 {     path:'/child/:id',     component:Child } // 父组件 <router-link :to="/child/123">导航进入子路由</router-link>

编程式this.$router.push

// 子路由配置 {     path:'/child/:id',     component:Child } // 父路由传参(一般通过事件触发) this.$router.push({     path:`/child/${id}` })

方式二params(url不显示参数)

这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

声明式router-link

// 子路由配置 {     path:'/child/:id',     name:'Child',     component:Child } // 父组件 <router-link :to="{name:'Child',params:{id:123}}">导航进入子路由</router-link>

编程式this.$router.push

// 子路由配置 {     path:'/child/:id',     name:'Child',     component:Child } // 父路由传参(一般通过事件触发) this.$router.push({     name:'Child',     params:{         id:123     } })

方式三query(url显示参数)

声明式router-link

// 子路由配置 {     path:'/child/:id',     name:'Child',     component:Child } // 父组件 <router-link :to="{name:'Child',query:{id:123}}">导航进入子路由</router-link>

编程式this.$router.push

 

// 子路由配置 {     path:'/child/:id',     name:'Child',     component:Child } // 父路由传参(一般通过事件触发) this.$router.push({     name:'Child',     query:{         id:123     } }) // id拼接 this.$router.push(路径+?id)

 

得到路由参数

 

用params通过this.$route.params获得

 

用query通过this.$route.query获得

总结:url不显示传参虽然得到了安全性的提升,但也存在缺陷刷新页面的时候,传递的值会丢失。普遍还是用id拼接的方法,得到路径传过来的参数也不会丢失。

params动态路由传参  //子路由配置 path:'/child/:id'  // 传参 this.$router.push({path:`/child/${id}`})   query id拼接传参 // 子路由配置 path:'/child'  //传参 this.$router.push(`/detail?id=${id}`)