$router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别

一、$router和$route的区别

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

例子：
//$router操作 路由跳转

this.$router.push({ name:'hello', params:{ name:'word', age:'11' } })

//$route读取 路由参数接收

var name = this.$route.params.name;

 

二、路由跳转方式name 、 path 和传参方式params 、query的区别

path 和 Name路由跳转方式，都可以用query传参
例子：

//Router.js
{
path: '/hello',
name: 'HelloWorld',
component: helloPage
}
跳转方式name
this.$router.push({
name: 'HelloWorld',
query: {
id: 12345 } }) 跳转方式path this.$router.push({ path: '/hello', query: { id: 12345 } }) //获取路由参数信息方式： {{$route.query.id}

path路由跳转方式,params传参会被忽略，只能用name命名的方式跳转

params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

注意：params传参如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，要怎么解决？

转载于:https://www.cnblogs.com/xiaoleilei123/p/11050345.html