Vue-路由传参query与params

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象//操作 路由跳转
this.$router.push({
name:'hello',
params:{
name:'word',
age:'11'
}
})//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

//传参，使用path跳转
this.$router.push({
path:'/login',
query: {
id:'123',
name: 'yangj'
}
})

//路由
import Login from '@/page/Login'

{
path: '/login',
name: 'Login',
component: 'Login'
}

//接收
id = this.$route.query.id; name = this.$route.query.name;//地址栏表现形式 这种方式感觉安全性不好暴露了参数，但是对于对隐私要求不强的页面可以这么玩
http://localhost:8080/#/Login?id=123&name=yangj

//传参，使用name跳转
this.$router.push({
name:'Login',
params: {
id:'123',
name: 'yangj'
}
})
//路由
import Login from '@/page/Login'
{
path: '/login/:id/:name', //这里的参数必须写（地址栏表现形式1），如果不写在页面强制刷新时参数会丢失（地址栏表现形式2）
name: 'Login',
component: 'Login'
}
//接收
id = this.$route.params.id; name = this.$route.params.name;

//地址栏表现形式1
http://localhost:8080/#/login/123456/yangj

//地址栏表现形式2
http://localhost:8080/#/login