vue-router中$route与$router，path与name，params与query的区别梳理

2024年1月12日 170次阅读 来源: 李洪威

一、$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传参如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，要怎么解决？

解决：一、传参字符串name小的时候，可以在路由后面加参数名/router1/:name
二、name大的时候用sessionStorage；（欢迎补充）

注意：如果路由为动态路由{path: ‘/hello/:id’,name:’hello’}
路由跳转执行this.$router.push({name: ‘hello’,params: obj});obj里面只要有id属性，就会自动带到URL里面

    原文作者：李洪威
    原文地址: https://segmentfault.com/a/1190000018806100
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞