• 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,看看它们的区别

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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,看看它们的区别

相关文章

  • Photoshop制作夹心饼干艺术字效果
  • AI制作超强立体效果
  • 宝塔面板删除网站根目录后自动重建的解决办法
  • FCKeditor安装FLV视频插件,适用所有CMS
  • node.js 基于 STMP 协议和 EWS 协议发送邮件
  • 解决微信video、audio 无法自动播放的问题
  • Thinkphp中import的用法是什么
  • ThinkPHP6怎么用表单令牌验证数据来源有效性
  • 介绍Laravel中的where高级使用方法
  • 手把手教你使用ThinkPHP+phpExcel导入导出Excel数据

文章分类

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

最近更新的内容

    • 如何解决php错误代码0x80070002问题
    • vue中的math.sqrt的用法是什么
    • 一个设计师的PS经验技巧及设计心得
    • 浅谈微信小程序中引入并使用自带和外部图标的方法
    • Photoshop制作漂亮的暗红色网页框架
    • 柒比贰主题网格风格四缩略图对齐样式代码
    • RESETful API接口设计规范
    • 关于 Laravel 项目 伪静态分页处理
    • 安全狗卸载网站打不开/iis启动不了解决方法
    • 百度频繁变更算法,我们该怎么办?

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

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