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 事件队列调整方法
Sep 18 Javascript
Javascript 入门基础学习
Mar 10 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
js中this的指向问题归纳总结
Nov 28 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 程序员也要学会使用“异常”
2009/06/16 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
如何理解python对象
2020/06/21 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
十八大演讲稿
2014/05/22 职场文书
会议通知格式范文
2015/04/15 职场文书