vue router总结 $router和$route及router与 router与route区别


Posted in Javascript onJuly 05, 2019

vue router总结 $router和$route及router与 router与route区别

1 this.$router和this.$route的区别

vue router

this.$router是VueRouter的实例方法,当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。
this.$route相当于当前激活的路由对象,包含当前url解析得到的数据,可以从对象里获取一些数据,如name,path等。

2 路由跳转分为编程式和声明式

声明式

//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>
//路由入口
<router-link :to="...">
//视图出口
<router-view></router-view>

当你想在一个页面嵌套子路由,并且不跳转页面的时候,我觉得这个超好用啊,子页面就会渲染在router-view的地方

编程式

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

但是一定要注意啊,如果你提供了path,那么params和query的配置就会被忽略的

3 path:'name'和path:'/name'的区别

如果加/则会被当作跟目录,否则当前的路径会嵌套在之前的路径中

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name
//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name

ps:下面看下vue中router与 router与route区别

vue-router中经常会操作的两个对象route和 route和router两个。

1、$route对象

vue router总结 $router和$route及router与 router与route区别

$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
**1.$route.path**
      字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
**2.$route.params**
      一个 key/value 对象,包含了 动态片段 和 全匹配片段,
      如果没有路由参数,就是一个空对象。
**3.$route.query**
      一个 key/value 对象,表示 URL 查询参数。
      例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
      如果没有查询参数,则是个空对象。
**4.$route.hash**
      当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
**5.$route.fullPath**
      完成解析后的 URL,包含查询参数和 hash 的完整路径。
**6.$route.matched**
      数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name    当前路径名字**
**8.$route.meta  路由元信息

route object 出现在多个地方:

•组件内的 this.route和 route和route watcher 回调(监测变化处理);
•router.match(location) 的返回值
•scrollBehavior 方法的参数
•导航钩子的参数:

router.beforeEach((to, from, next) => {
 // to 和 from 都是 路由信息对象,后面使用路由的钩子函数就容易理解了
})

2、$router对象

vue router总结 $router和$route及router与 router与route区别

$router对象是全局路由的实例,是router构造方法的实例。

路由实例方法:

1、push

// 字符串
   this.$router.push('home')
// 对象
   this.$router.push({ path: 'home' })
// 命名的路由
   this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
   this.$router.push({ path: 'register', query: { plan: '123' }})

push方法其实和<router-link :to="...">是等同的。

 注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

2、go

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退

3、replace

//push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
 不会向 history 栈添加一个新的记录

05

// 一般使用replace来做404页面
this.$router.replace('/')

配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径,就不会一直嵌套之前的路径。

总结

以上所述是小编给大家介绍的vue router总结 $router和$route及router与 router与route区别 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
基于vue实现圆形菜单栏组件
Jul 05 #Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 #Javascript
Electron vue的使用教程图文详解
Jul 05 #Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 #Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
You might like
php中apc缓存使用示例
2013/12/25 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python字典的核心底层原理讲解
2019/01/24 Python
Python按钮的响应事件详解
2019/03/04 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python实现批量修改文件名
2020/03/23 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python爬取招聘要求等信息实例
2020/11/20 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
旅游管理毕业生自荐书
2014/02/02 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
布达拉宫的导游词
2015/02/02 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
httpclient调用远程接口的方法
2022/08/14 Java/Android