vue-router 路由动态传参 query和params的区别
一、query和params的知识点理解/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params/data?id=1 /data?id=2 这里的 id 叫 queryparams方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。query方法,就没有这种限制,直接在跳转里面用就可以。二、query和par...
一、query和params的知识点理解
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query
params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。
query方法,就没有这种限制,直接在跳转里面用就可以。
二、query和params的使用方法
使用params传参,路由配置的时候path带上参数
{
path: '/detail/:id/',
name: "detail",
component: detail//这个details是传进来的组件名称
}
使用:
方法1:<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>
方法2:this.$router.push({name:'details',params:{id:123}})
页面url显示结果是:http://localhost:8081/#/details/123
params跳转方式:
写法一:this.$router.push(`/detail/${this.$route.params.id}`)
写法二:this.$router.push({name:'detail',params:{id:123}})
使用query传参,路由配置的时候path不用带参数
{
path: '/detail',//这里不需要参入参数,参见上面的params写法
name: "detail",
component: detail//这个details是传进来的组件名称
}
使用:
方法1:<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>
方法2:this.$router.push({name:'details',query:{id:123}})
方法3:<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link>
方法4:this.$router.push({path:'details',query:{id:123}})
页面url显示结果是:http://localhost:8081/#/details?id=123
query跳转方法:
写法一:this.$router.push(`/detail?id=${this.$route.query.id}`);
写法二:this.$router.push({path:'detail',query:{id:123}})
要是想获取参数值:各自的获取方法是:
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
更多推荐
所有评论(0)