• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > vue路由学习之区分$route和$router,看看它们的区别

vue路由学习之区分$route和$router,看看它们的区别

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了vue路由,区分$route和$router的区别等相关知识,希望对您有所帮助

路由的设置和跳转中有两个对象$router和$route,是不是很像,有些傻傻分不清。本篇文章带大家了解一下vue路由中$route和$router的区别,希望对大家有所帮助!


vue路由学习之区分$route和$router,看看它们的区别


最近在学习vue的路由之间传值,这就涉及到了两个对象 $route 和 $router 这两者之间的区别,自己也通过上网查了一些资料,最后做出以下的总结。

1、$router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由,包含了许多关键的对象和属性。


vue路由学习之区分$route和$router,看看它们的区别


以history对象来举例:

$router.push({path:'home'}),本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录

$router.replace({path:'home'}),//替换路由,没有历史记录

$router.push('/login') ,跳转到指定路由


2、$route是一个跳转的路由对象,每一个路由都会有一个$route对象,是一个局部的对象,可以获取对应的name,path,params,query等


vue路由学习之区分$route和$router,看看它们的区别


这两者不同的结构可以看出两者的区别,他们的一些属性是不同的。

$route.path 字符串,等于当前路由对象的路径,会被解析为绝对路径,如/home/ews

$route.params 对象,含路有种的动态片段和全匹配片段的键值对,不会拼接到路由的url后面

$route.query 对象,包含路由中查询参数的键值对。会拼接到路由url后面

$route.router 路由规则所属的路由器

$route.matchd 数组,包含当前匹配的路径中所包含的所有片段所对象的配置参数对象

$route.name 当前路由的名字,如果没有使用具体路径,则名字为空


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一文讲解Vue中路由切换终止异步请求(附代码)
  • VUE动态添加的路由页面刷新时失效的原因及解决方案
  • 浅析Vue中hash路由和history路由的区别
  • vue路由学习之区分$route和$router,看看它们的区别

相关文章

  • 2022-04-29PhotoShop制作奇特X光片骨骼特效文字教程
  • 2022-04-29Photoshop设计绚丽效果的星光视频教程
  • 2022-04-29浅谈bootstrapTable+jstree插件对树列表条件和查询条件的处理
  • 2022-04-29vue中的math.sqrt的用法是什么
  • 2022-04-29PHP遍历读取文件夹中图片并分页显示
  • 2022-04-29MySQL怎么修改一列的值
  • 2022-04-29Illustrator制作电视台标志
  • 2022-04-29ThinkPHP中自定义错误、成功、异常提示页面的方法
  • 2022-04-29如何让WordPress支持google AMP
  • 2022-04-29PS鼠绘精致开关按钮

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 怎么用Zblog做优化?
    • 织梦DedeCMS V5.7前台搜索打开慢的原因及解决方法
    • Photoshop技巧教程:解读13条PS高级使用技巧
    • 微信小程序实现点赞业务
    • PHP怎么将整数转为浮点数类型
    • phpMyadmin怎么使用空密码登入
    • 怎么从微信卡包跳转到小程序?实现方法浅析
    • 推荐一个laravel极速完成增删改查的第三方包
    • 教你在Mac下如何快速重置mysql root密码
    • 关于uniApp editor微信滑动问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有