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 相关文章推荐
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
wordpress之js库集合研究介绍
Aug 17 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
js中创建对象的几种方式
Feb 05 Javascript
详解vue.js的devtools安装
May 26 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue后台管理之动态加载路由的方法
Aug 13 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版)
2012/08/21 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
django 修改server端口号的方法
2018/05/14 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python的launcher用法知识点总结
2020/08/07 Python
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
学生打架检讨书
2014/02/14 职场文书
工程承包协议书
2014/04/22 职场文书
临床护理求职信
2014/04/26 职场文书
市场营销策划方案
2014/06/11 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
死亡证明书样本说明
2014/10/18 职场文书
继承公证书格式
2015/01/26 职场文书
第一书记观后感
2015/06/08 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python