专栏首页Czy‘s Blog$router和$route的区别

$router和$route的区别

$router和$route的区别

Vue RouterVue.js的路由管理器,路由就是SPA单页应用的访问路径,在Vue实例内部,可以通过$router访问路由实例,即在路由定义文件中export defaultnew Router(/*...*/)路由实例,通过$route可以访问当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录,可以将$router理解为一个容器去管理了一组$route,而$route是进行了当前URL和组件的映射。

$router对象属性

  • $router.app: 配置了routerVue根实例。
  • $router.mode: 路由使用的模式。
  • $router.currentRoute: 当前路由对应的路由信息对象。

$router对象方法

  • $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.jsimportVue Router实例中直接定义导航守卫,当然也可在Vue实例中访问$router来定义。
  • $router.beforeResolve(to, from, next): 全局解析守卫,在beforeRouteEnter调用之后调用,同样接收tofromnext三个参数。
  • $router.afterEach(to, from): 全局后置钩子,进入路由之后调用,接收tofrom两个参数。
  • $router.push(location[, onComplete[, onAbort]]): 编程式导航,使用$router.push方法导航到不同的URL,此方法会向history栈添加一个新的记录,当点击浏览器后退按钮时,则回到之前的URL
  • $router.replace(location[, onComplete[, 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对象属性

  • $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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue路由History模式分析

    Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属...

    WindrunnerMax
  • CSS劫持攻击

    CSS劫持是一种并不很受重视的劫持方式,但是其也有一定的危害,且由于其并不一定需要依赖JavaScript,这使得此种攻击方式更容易实现。

    WindrunnerMax
  • Vue路由Hash模式分析

    Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,即使用URL的Hash来模拟一个完整的URL,当UR...

    WindrunnerMax
  • vue中router与route

    $router对象是全局路由的实例,是router构造方法的实例,主要是实现路由跳转。 路由实例方法: 1、push

    刘亦枫
  • vue-router2 写法示例

    做单页应用,需要客户端路由。用 Vue.js 做单页应用,一般都用 vue-router 做客户端路由。文档地址点这里。

    Joel
  • 实用小技巧 利用Python一秒将全部中文名转为拼音

    启用多音字模式时,竟然发现 ‘叶’ 也是多音字,查询了资料发现确实是这样,涨知识啦!

    叶庭云
  • 工作经历教给我的一些东西

    第一篇赞最多的文章被我痛心的隐藏了。。因为过了这么久回顾一下,那时的体会已经不能代表我现在的想法了。我现在都惊奇当时为什么会有这么多关注。。。更何况现在自己的学...

    Alan Zhang
  • 2.2.4 HTML5 Canvas绘图基础

    Canvas是HTML标准近年发展到HTML5时添加的新特性,用于在网页上高效绘图。H5 canvas绘图,与MFC(Microsoft Foundation ...

    周星星9527
  • 【leetcode两题选手】MySQL类题目(四)

    某网站包含两个表,Customers 表和 Orders 表。编写一个 SQL 查询,找出所有从不订购任何东西的客户。

    看、未来
  • 2.2.4 HTML5 Canvas绘图基础

    Canvas是HTML标准近年发展到HTML5时添加的新特性,用于在网页上高效绘图。H5 canvas绘图,与MFC(Microsoft Foundation ...

    周星星9527

扫码关注云+社区

领取腾讯云代金券