Vue中的$router和$route

最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router$route,有些傻傻分不清,后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别

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

举例:history对象

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

方法:

$router.replace({path:'home'});//替换路由,没有历史记录
  • 2.route是一个跳转的路由对象,每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query

我们可以从vue devtools中看到每个路由对象的不同

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

  • $route.path

    字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news"

  • $route.params

    对象,包含路由中的动态片段和全匹配片段的键值对

  • $route.query

    对象,包含路由中查询参数的键值对。例如,对于/home/news/detail/01?favorite=yes ,会得到$route.query.favorite == 'yes'

  • $route.router

    路由规则所属的路由器(以及其所属的组件)。

  • $route.matched

    数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

  • $route.name

    当前路径的名字,如果没有使用具名路径,则名字为空。

  • $route.path, $route.params, $route.name, $route.query这几个属性很容易理解,看示例就能知道它们代表的含义
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对...
    独行侠_ef93阅读 3,821评论 0 1
  • SPA单页应用 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网...
    视觉派Pie阅读 14,101评论 1 55
  • 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用 标签编写链接哪?...
    浪里行舟阅读 67,949评论 12 203
  • 本文转载于前端工匠。如有侵权联系本人立刻删除 一、首先带着问题 要学习vue-ro...
    qiaoguoxing阅读 3,355评论 0 1
  • 东晋名臣温峤是曹魏名臣温恢的曾孙,西晋司徒温羡的侄子,父亲是河东太守,货真价实的“高干子弟”。他从小就博学聪敏,而...
    寒七琪阅读 2,593评论 0 0

友情链接更多精彩内容