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 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
javascript实现弹出层效果
Dec 10 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
微信小程序实现日历签到
Sep 21 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
多文件上载系统完整版
2006/10/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
如何获得EntityManager
2014/02/09 面试题
技术人员面试提纲
2013/11/28 职场文书
经济贸易系求职信
2014/08/04 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
银行求职信范文
2019/05/13 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Python中第三方库Faker的使用详解
2022/04/02 Python
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js