VUE - 路由传参的三种方式
Posted -xiao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE - 路由传参的三种方式相关的知识,希望对你有一定的参考价值。
1. 在路由中配置 path
{
path:‘product/:id‘,
name:"product",
component:Product,
},
传递参数,页面刷新数据不会消失
getProductInfo(){ // 获取路由参数 let id = this.$route.params.id; this.axios.get(`/products/${id}`).then(res=>{ this.product = res }) },
获取参数
this.$route.params.id
2. query
使用 path 来匹配路由
this.$router.push({ path:‘/index‘, query:{from:"login"} })
地址栏会显示相应参数
获取参数
this.$route.query.from
3. params
使用 name 来匹配路由
this.$router.push({ name:‘index‘, params:{from:"login"} })
地址栏不会显示参数
获取参数
this.$route.params.from
以上是关于VUE - 路由传参的三种方式的主要内容,如果未能解决你的问题,请参考以下文章