vue |
您所在的位置:网站首页 › vue的路由传值query和params使用场景 › vue |
一. query和params的知识点理解
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query
params方法传参时,要在路由后面加参数名,并且传参时,参数名要跟路由后面设置的参数名对应。 query方法,就没有这种限制,直接在跳转里面用就可以。 二. query和params的使用方法 1.使用params传参,路由配置的时候path要带上动态参数 { path: '/detail/:id/', name: "detail", component: detail//这个details是传进来的组件名称 } 使用: 方法1:点击按钮 方法2:this.$router.push({name:'details',params:{id:123}}) 页面url显示结果是:http://localhost:8081/#/details/123params跳转方式: 注意:如果提供了 path,params 会被忽略,所以可以使用以下两种方式:写法一:this.$router.push('/detail/${this.$route.params.id}')写法二:this.$router.push({name:'detail',params:{id:123}}) 2. 使用query传参,路由配置的时候path不用带参数 { path: '/detail',//这里不需要参入参数,参见上面的params写法 name: "detail", component: detail//这个details是传进来的组件名称 } 使用: 方法1:点击 方法2:this.$router.push({name:'details',query:{id:123}}) 方法3:点击 方法4:this.$router.push({path:'details',query:{id:123}}) 页面url显示结果是:http://localhost:8081/#/details?id=123query跳转方法: 写法一:this.$router.push('/detail?id=${this.$route.query.id}');写法二:this.$router.push({path:'detail',query:{id:123}}) 3. 要是想获取参数值:各自的获取方法是:query和params分别是:this.$route.query.id,this.$route.params.id 三. query和params在浏览器地址的显示方式params在浏览器地址栏中不显示参数名称http://47.107.171.252:8001/#/detail/123456 query在浏览器地址栏中显示参数名称http://47.107.171.252:8001/#/detail?id=123456 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |