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中常用的SET和GET
Jan 13 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
九种原生js动画效果
Nov 11 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
详解JavaScript函数
Dec 01 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
axios取消请求的实践记录分享
Sep 26 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之规范编程命名小结
2013/05/15 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
JavaScript 乱码问题
2009/08/06 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python复制文件的方法实例详解
2015/05/22 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python虚拟环境迁移方法
2019/01/03 Python
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
一些Unix笔试题和面试题
2013/01/22 面试题
Why do we need Unit test
2013/01/03 面试题
采购主管岗位职责
2014/02/01 职场文书
财政专业求职信范文
2014/02/19 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python