$router和$route的区别
时间:2022-07-24
本文章向大家介绍$router和$route的区别,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
$router和$route的区别
Vue Router
是Vue.js
的路由管理器,路由就是SPA
单页应用的访问路径,在Vue
实例内部,可以通过$router
访问路由实例,即在路由定义文件中export default
的new Router(/*...*/)
路由实例,通过$route
可以访问当前激活的路由的状态信息,包含了当前URL
解析得到的信息,还有URL
匹配到的路由记录,可以将$router
理解为一个容器去管理了一组$route
,而$route
是进行了当前URL
和组件的映射。
$router对象属性
-
$router.app
: 配置了router
的Vue
根实例。 -
$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.js
中import
的Vue Router
实例中直接定义导航守卫,当然也可在Vue
实例中访问$router
来定义。 -
$router.beforeResolve(to, from, next)
: 全局解析守卫,在beforeRouteEnter
调用之后调用,同样接收to
、from
、next
三个参数。 -
$router.afterEach(to, from)
: 全局后置钩子,进入路由之后调用,接收to
、from
两个参数。 -
$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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL 索引(3)
- TS 设计模式04 - 适配器模式
- WebRTC | 原理、架构、框架目录、运行机制、核心类、PeerConnection调用过程等详解
- sql注入总结笔记
- WebRTC | Web服务器原理、Nodejs工作原理、Nodejs事件处理流程、V8引擎等要点解析
- OpenGL ES 3.0 | 围绕HelloTriangle实战案例 展开 渲染流程分析
- 基于 Kotlin + Netty 实现一个简单的 TCP 自定义协议
- dnslog带出——sqli-labs第8关
- Boolean源码解剖学
- SpringBoot+Mybatis整合出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found
- xss-labs第1~13关
- 在虚拟机上搭建xss平台
- 一个速度快,内存占用小的一致性哈希算法
- 一文搞定web微信第三方登录
- python学习笔记(1)