vue中query和pramas中的那点事//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象
//操作路由跳转
this.$router.push({
name:'hello',
params:{
name:'word',
age:'11'
}
})
//读取路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;
query传参要⽤path来引⼊（name引⼊也可以），params传参要⽤name来引⼊
//query传参，使⽤name跳转
this.$router.push({
name:'second',
query: {
queryId:'20180822',
queryName: 'query'
}
})
/
/query传参，使⽤path跳转
this.$router.push({
path:'second',
query: {
queryId:'20180822',
queryName: 'query'
}
})
//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
2·params传递参数
注：使⽤params传参只能使⽤name进⾏引⼊
//params传参使⽤name
this.$router.push({
name:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
需要注意的是：
params是路由的⼀部分，必须要在路由后⾯添加参数名。query是拼接在url后⾯的参数，没有也没关系。
params⼀旦设置在路由，params就是路由的⼀部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页⾯会没有内容。
如果路由后⾯没有 /:id/:name    地址栏没有参数但是如果你刷新⼀下，就会发现页⾯获取参数失败
因此我们不可能让⽤户不要刷新，所以我们必须在路由后⾯加上 /:id/:name
//params传参使⽤path
this.$router.push({
path:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
总结
传参可以使⽤params和query两种⽅式。
使⽤params传参只能⽤name来引⼊路由，即push⾥⾯只能是name:’xxxx’，不能是path:’/xxx’，因为params只能⽤name来引⼊路由，如果这⾥写成了path，接收参数页⾯会是undefined。
使⽤query传参使⽤path来引⼊路由。
params是路由的⼀部分，必须要在路由后⾯添加参数名。query是拼接在url后⾯的参数，没有也没关系。
⼆者还有点区别，直⽩的来说query相当于get请求，页⾯跳转的时候，可以在地址栏看到请求参数，⽽params相当于post请求，参数不会再地址栏中显⽰。
解决问题： vue  通过 name 和 params 进⾏调整页⾯传参刷新参数丢失问题
export default new Router({
routes: [
{
path: '/',
redirect: '/main',
},{
path: '/main',
name: 'Main',
component: ()=> import('@/views/Main'),
children: [
{
//path: '/testPage',  //这种⽅式不配置参数名，页⾯刷新会丢失参数
path: '/testPage/:aaa/:bbb',  //这样通过 name 和 params 进⾏路由传参时，刷新页⾯就不会丢失参数aaa 和 bbb 了。
name: 'TestPage',
component: ()=> import('@/views/TestPage/TestPage')
},
]
},
]
})
methods: {
//路由调整传参测试
goRouterTest(){
// this.$router.push('/testpage');
this.$router.push({ name: 'TestPage', params:{aaa: '111', bbb: '222'} });
}
},
如果⽤params传值为对象情况下刷新页⾯就消失
解决办法⽤ JSON.stringify() ⽅法⽤于将 JavaScript 值转换为 JSON 字符串。然后再⽤组件内部JSON,parse()再次转为对象。或者选中vuex⽅式传值在组件内容⽤计算属性获取。
路由组件传参
在组件中使⽤$route会使之与其对应路由形成⾼度耦合，从⽽使组件只能在某些特定的 URL 上使⽤，限制了其灵活性。
使⽤props将组件和路由解耦：取代与$route的耦合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [{ path: '/user/:id', component: User }]
})
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
vue json字符串转数组]
})
通过props解耦如果props被设置为true，route.params将会被设置为组件属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。