vue中的$router与$route的区别分析-蒲公英云

vue中的$router与$route的区别分析

红太狼 2023-06-05 14:59 59阅读 0赞

一. r o u t e r 和 router和 router和route的区别

**$router:是路由操作对象，包含路由跳转的方法，钩子函数等(只写对象)**
 例如：history对象 this.$router.push会往history中添加一个新的记录
 跳转用的链接就可以使用this.$router.push ,与router-link 跳转一样
**$route 相当于当前正在跳转的路由对象，可以获取里面的name,path,params,query等(只读对象)**
例：
//$router操作 路由跳转
this.$router.push({name:"hello",params:{name:'你好'，age:'18'}})
//$route 读取 路由参数接收
let name = this.$route.params.name

二、路由跳转方式（name、path）与路由传参方式（params、query）

****path 和 name路由跳转方式，都可以使用query传参****
例：
//Router.js
{ 
    path:'/hello',
    name:'HelloWorld',
    component:hello
}
//跳转方式 name
this.$router.push({ 
    name:'HelloWorld',
    query:{ 
        id:123
    }
})
//跳转方式 path
this.$router.push({ 
    path:'/hello',
    query:{ 
        id:123
    }
})
//获取路由参数信息方式
{ { let id = this.$route.query.id}}
**注意：path路由跳转方式，params传参会被忽略，只能用name命名的方式跳转
params传参,push里面只能是name:'xxxx',不能是path:'/xxxx',因为params只能用name来引入路径，
如果这里写成了path,接收参数页面会是undefined
另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。
params传参如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失**