当前位置: 首页 > Web前端 > vue.js

Vue中的$route和$router有什么区别?

时间:2023-04-01 01:51:06 vue.js

今天我们将讨论Vue中$route和$router的区别。我们可以这样理解区别:$route是用来获取路由信息的,$router是用来操作路由的$route对象route是路由信息对象,主要包含路由的一些基本信息,包括当前路径,parameters,queryobject等(包括name,meta,path,hash,query,params,fullPath,matched,redirectedFrom)路由对象多处出现:1.组件中的this.route和routewatcher回调(监听变化处理));2.路由器。match(location)的返回值3.scrollBehavior方法的参数4.导航钩子的参数//to:去哪个页面//from:从哪里来//next:是一个函数.//如果直接释放next()//如果想跳转到其他页面next(otherpages)router.beforeEach((to,from,next)=>{//to和from都是路由信息对象,并且routing后面会用到钩子函数,好理解})**1.$route.path**字符串,对应当前路由的路径,总是解析为绝对路径,比如"/foo/bar".**2.$route.params**一个key/value对象,包括动态分片和全匹配分片,如果没有路由参数则为空对象。**3.$route.query**表示URL查询参数的键/值对象。例如,对于路由/foo?user=1,$route.query.user==1,或者如果没有查询参数则为空对象。**4.$route.hash**当前路由的哈希值(不带#),如果没有哈希值则为空字符串。锚点**5.$route.fullPath**完成解析的URL,包括查询参数的全路径和hash。**6.$route.matched**数组,包含当前匹配路由包含的所有分片对应的配置参数对象。**7.$route.name当前路径名****8.$route.meta路由元信息**$router对象$router对象是全局路由的实例,router构造方法的实例,包括一些路由跳转方法、钩子函数和其他路由实例方法:1.push//stringthis.$router.push('home')//objectthis.$router.push({path:'home'})//命名路由this.$router.push({name:'user',params:{userId:123}})//加上查询参数,变成/register?plan=123this.$router.push({path:'register',query:{plan:'123'}})push方法其实是等价的。注意:push方法的跳转会在历史栈中增加一条新记录。当我们点击浏览器的后退按钮时,我们可以看到上一页。2.go//页面路由向前或向后跳转this.$router.go(-1)//向后3.replacepush方法会在历史栈中添加一条新记录;而replace方法是替换当前页面,不会往历史栈中添加新记录//一般使用replace做404页面this.$router.replace('/')注意:配置路由的时候,有时候'/'是添加到路径中,有时不是,以'/'开头的会被当作根路径,不会一直嵌套前面的路径。