参考:

https://uzshare.com/view/788446

https://router.vuejs.org/zh/

$route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数。

① $route.path字符串,对应当前路由的路径,总是解析为绝对路径,如 "/order"。

② $route.params一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。

③ $route.query一个 key/value 对象,表示 URL 查询参数。 例如,对于路径 /foo?user=1,则有 $route.query.user为1, 如果没有查询参数,则是个空对象。

④ $route.hash当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

⑤ $route.fullPath完成解析后的 URL,包含查询参数和 hash 的完整路径。

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

⑦ $route.name   当前路径名字

$router 是“路由实例”对象,即使用 new VueRouter创建的实例,包括了路由的跳转方法,钩子函数等。

$router.push和$router.replace的区别:

  • 使用push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。

  • 使用replace方法不会向 history 添加新记录,而是替换掉当前的 history 记录,即当replace跳转到的网页后,‘后退’按钮不能查看之前的页面。

Vue:$route 和 $router 的区别的更多相关文章

  1. vue中$route 和$router的区别

    在vue中会出现一种情况 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的区别傻傻的分 ...

  2. vue-cli中route和router的区别

    在使用vue-router的时候经常分不清router和route的区别: 在函数式编程中: this.$router.push('/login') 或者Router.push() 在动态获取路由参数 ...

  3. vue中的$route和$router的区别

    1. $route是一个对象 可以获取当前页面的路由的路径query.params.meta等参数: 2.$router是VueRouter的一个实例对象 在options中可以获取路由的routes ...

  4. vue & this.$route & this.$router

    vue & this.\(route & this.\)router const User = { template: '<div>User</div>' } ...

  5. this.$route和this.$router的区别

    1. this.$router: 表示全局路由器对象,项目中通过router路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()等方法: 2. thi ...

  6. express中app和router的区别

      var app = express(); var router = express.Router(); 以上二者的区别是什么,什么时候用哪个最合适? 区别看下面的例子: app.js var ex ...

  7. 集线器hub、交换机switch、路由器router 的区别

    原文链接:http://blog.csdn.net/thq0201/article/details/7782319 首先说HUB,也就是集线器.它的作用可以简单的理解为将一些机器连接起来组成一个局域网 ...

  8. Hub,bridge,switch and router的区别

    首先说HUB,也就是集线器.它的作用可以简单的理解为将一些机器连接起来组成一个局域网.而交换机(又名交换式集线器)作用与集线器大体相同.但是两者在性能上有区别:集线器采用的式共享带宽的工作方式,而交换 ...

  9. beforeRouteEnter 与 beforeRouteUpdate(watch $route 对象) 的区别

    项目 区别 适用场景 网址 beforeRouteEnter beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建.不过,你可以通过 ...

随机推荐

  1. android studio toolbar遮挡住下面控件内容

    只需要在该控件布局(content_***.xml)加入: app:layout_behavior="@string/appbar_scrolling_view_behavior" ...

  2. 【JZOJ2867】Contra

    description 偶然间,chnlich 发现了他小时候玩过的一个游戏"魂斗罗",于是决定怀旧.但是这是一个奇怪的魂斗罗 MOD. 有 N 个关卡,初始有 Q 条命. 每通过 ...

  3. day18 函数定义、参数;名称空间;全局变量及局部变量。

    Python之路,Day6 = Python基础6 函数的定义 def func1(): # 定义一个函数,名字叫func1,括号中没有传入参数 print('hello word') # 这里是 f ...

  4. kubernetes 强制删除istio-system空间,强制删除pod

    加上这个选项 --grace-period=0 --force--grace-period=0 --force 先删除deployment,pod,svc再删除namespace > kubec ...

  5. BZOJ 4557 (JLOI 2016) 侦查守卫

    4557: [JLoi2016]侦察守卫 Time Limit: 20 Sec Memory Limit: 256 MB Submit: 493 Solved: 342 [Submit][Status ...

  6. 1636: Pascal山脉

    1636: Pascal山脉 时间限制: 1 Sec  内存限制: 128 MB提交: 51  解决: 15[提交][状态][讨论版] 题目描述 小卡卡顺着老者所指的方向,来到了Pascal神峰的顶峰 ...

  7. windows api(GDI)实现图片旋转

    GDI实现图片旋转,博主在网上找了好多资料,都不太如意. 并且在尝试中发现,如果先用SetViewportOrgEx将HDC上的坐标原点移动到图片中心:再在HDC上的获取每个点,用三角函数进行变换,算 ...

  8. [kuangbin带你飞]专题一 简单搜索 - C - Catch That Cow

    #include<iostream> #include<cstdio> #include<string> #include<vector> #inclu ...

  9. IE6/IE7尿性笔记 && avalon && director

    表单提交 [ie6] form默认特性(input回车以及点击type=submit的按钮会自动触发form submit),在ie6中,不能使button[submit],必须是input[subm ...

  10. Tomcat的8080、8005、8009端口

    8080是http 1.1 connector,也就是接收处理http请求的端口,如果你只用一个tomcat处理所有请求,可以只使用这个connector. 8005是 tomcat接受关闭指令的端口 ...