params与query
router文件下index.js里面,是这么定义路由的:
{
path: '/about',
name: 'About',
component: About
}
用query传参可以直接写在path路由地址里,也可写在json对象中
//query,用路径跳转
this.$router.push({
path:'/about',
query:{
name:'about',
code:111
}
})
接收参数
this.$route.query
是{name: "about", code: "111"}
用params传参需要直接写在json对象中,跳转地址为router中配置的name(此处是About),params中是传的数据
//params,用name跳转传参
this.$router.push({
name:'About',
params:{
name:'about',
code:111
}
})
接收参数
this.$route.params.code;
是
{name: "about", code: "111"}
总结:
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
vue-router打开新页面
const { href } = this.$router.resolve({
path: '/about',
query: {
id: item.id
}
})
window.open(href, '_blank')