注意（用params传参，F5强制刷新参数会被清空，用query，由于参数适用路径传参的所以F5强制刷新也不会被清空。（传参强烈建议适用string））
也可以选用sessionstorage/localstorage/cookie存储，
params:参数不会显示到路径上
1：配置路径rutes
exportdefaultnewRouter({
routes:[
{
path:'/testVueRouter',
name:'TestVueRouter',
component:TestVueRouter
},
{
path:'/testVueRouterTo',
//一定要写name,params必须用name来识别路径
name:'TestVueRouterTo',
component:TestVueRouterTo
}
]
})
2：传递参数：用$router
!--test-vue-router页面--template
div
a@click="routerTo()"query传参/a
/div/templatescript
exportdefault{
methods:{
routerTo(){
this.$({
name:`TestVueRouterTo`,
params:{
page:'1',code:'8989'
}
})
}
}
}
/script
3：接受参数：用$route，少个r,注意啦
!--test-vue-router-to页面--template
div
/div/templatescript
exportdefault{
data(){
return{
page:'',
code:''
}
},
created(){
()
},
methods:{
getRouterData(){
=this.$
=this.$
('page',)
('code',)
}
}
}
/script
query：最好也用name来识别，保持与params一致性，好记了，路径传参
1：路径配置（跟params一样，代码不写了）
2：传递参数页
!--test-vue-router页面--template
div
a@click="routerTo()"query传参/a
/div/templatescript
exportdefault{
methods:{
routerTo(){
this.$({
name:`TestVueRouterTo`,
//只是把query改了，其他都没变
query:{
page:'1',code:'8989'
}
})
}
}
}
/script
3：接受参数
!--test-vue-router-to页面--template
div
/div/templatescript
exportdefault{
data(){
return{
page:'',
code:''
}
},
created(){
()
},
methods:{
getRouterData(){
//只是改了query，其他都不变
=this.$
=this.$
('page',)
('code',)
}
}
}
/script
下面我们采用path:'/testVueRouterTo'
1：query（成功）
!--test-vue-router页面--template
div
a@click="routerTo()"query传参/a
/div/templatescript
exportdefault{
methods:{
routerTo(){
this.$({
path:'/testVueRouterTo',
query:{
page:'1',code:'8989'
}
})
}
}
}
/script
!--test-vue-router-to页面--template
div!--span{{page}}/span
spanv-show="code==='89'"{{code}}/span
span{{password}}/span--
/div/templatescript
exportdefault{
data(){
return{
page:'',
code:'',
password:''
}
},
created(){
()
},
methods:{
getRouterData(){
//debugger
=this.$
=this.$
('page',)
('code',)
}
}
}
/script
