$router和$route的区别 Vue Router是Vue.js的路由管理器,路由就是SPA单页应用的访问路径,在Vue实例内部,可以通过$router访问路由实例,即在路由定义文件中expor
$router和$route的区别
-
$router.app
: 配置了router
的Vue
根实例。
-
$router.mode
: 路由使用的模式。
-
$router.currentRoute
: 当前路由对应的路由信息对象。
-
$router.beforeEach(to,from,next)
: 全局前置守卫,守卫是异步解析执行,此时导航在所有守卫resolve
完之前一直处于等待中状态,守卫方法接收三个参数: to: Route
即将要进入的目标路由对象、from: Route
: 当前导航正要离开的路由、next: Function
: 调用该方法来resolve
这个钩子,执行效果依赖next
方法的调用参数,例如next()
、next(false)
、next('/')
、next({path:'/',name:'home',replace:true,query:{q:1}})
、next(error)
等,通常在main.js
中import
的Vue Router
实例中直接定义导航守卫,当然也可在Vue
实例中访问$router
来定义。
-
$router.beforeResolve(to,next)
: 全局解析守卫,在beforeRouteEnter
调用之后调用,同样接收to
、from
、next
三个参数。
-
$router.afterEach(to,from)
: 全局后置钩子,进入路由之后调用,接收to
、from
两个参数。
-
$router.push(location[,onComplete[,onAbort]])
: 编程式导航,使用$router.push
方法导航到不同的URL
,此方法会向history
栈添加一个新的记录,当点击浏览器后退按钮时,则回到之前的URL
。
-
$router.replace(location[,onAbort]])
: 编程式导航,跟$router.push
很像,唯一的不同就是,其不会向history
添加新记录,而是跟它的方法名一样替换掉当前的history
记录。
-
$router.go(n)
: 编程式导航,这个方法的参数是一个整数,意思是在history
记录中向前或者后退多少步,类似window.history.go(n)
。
-
$router.back()
: 编程式导航,后退一步记录,等同于$router.go(-1)
。
-
$history.forward()
: 编程式导航,前进一步记录,等同于$router.go(1)
。
-
$router.getMatchedComponents([location])
: 返回目标位置或是当前路由匹配的组件数组 ,是数组的定义或构造类,不是实例,通常在服务端渲染的数据预加载时使用。
-
$router.resolve(location[,current[,append]])
: 解析目标位置,格式和<router-link>
的to prop
相同,current
是当前默认的路由,append
允许在current
路由上附加路径,如同 router-link
。
-
$router.addRoutes(route)
: 动态添加更多的路由规则,参数必须是一个符合routes
选项要求的数组。
-
$router.onReady(callback[,errorCallback])
: 该方法把一个回调排队,在路由完成初始导航时调用,这意味着它可以解析所有的异步进入钩子和路由初始化相关联的异步组件,这可以有效确保服务端渲染时服务端和客户端输出的一致,第二个参数errorCallback
会在初始化路由解析运行出错时被调用。
-
$router.onError(callback)
: 注册一个回调,该回调会在路由导航过程中出错时被调用,被调用的错误必须是下列情形中的一种,错误在一个路由守卫函数中被同步抛出、错误在一个路由守卫函数中通过调用next(err)
的方式异步捕获并处理、渲染一个路由的过程中需要尝试解析一个异步组件时发生错误。
-
$route.path
: 返回字符串,对应当前路由的路径,总是解析为绝对路径。
-
$route.params
: 返回一个key-value
对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
-
$route.query
: 返回一个key-value
对象,表示URL
查询参数。
-
$route.hash
: 返回当前路由的带#
的hash
值,如果没有hash
值,则为空字符串。
-
$route.fullPath
: 返回完成解析后的URL
,包含查询参数和hash
的完整路径。
-
$route.matched
: 返回一个数组,包含当前路由的所有嵌套路径片段的路由记录,路由记录就是routes
配置数组中的对象副本。
-
$route.name
: 如果存在当前路由名称则返回当前路由的名称。
-
$route.redirectedFrom
: 如果存在重定向,即为重定向来源的路由的名字。
https://github.com/WindrunnerMax/EveryDay
https://router.vuejs.org/zh/api/#routes
https://juejin.im/post/6844903665388486664
https://juejin.im/post/6844903608534695943
https://juejin.im/post/6844903892560379917
https://juejin.im/post/6844904005236162568
https://segmentfault.com/a/1190000016662929