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 相关文章推荐
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
js子页面获取父页面数据示例
May 15 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 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获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python3数字求和的实例
2019/02/19 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
django使用xadmin的全局配置详解
2019/11/15 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
化工专业应届生求职信
2013/11/08 职场文书
经济管理专业毕业生推荐信
2013/11/11 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
校本教研工作制度
2014/01/22 职场文书
三年级语文教学反思
2014/02/01 职场文书
陈欧的广告词
2014/03/18 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
企业安全生产标语
2014/06/06 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis