Vue的route与router

主要介绍Vue的route与router区别 使用场景

 主打一手简单易懂 尽量避免晦涩的词

---

简介：

route获取当前路由信息

router操作路由 跳转 前进 后退等....

---

this.$route:

获取路由信息（路由传递的params query参数，路由对应组件名称，路由路径URL等...）

列举几种常用数值获取： 

1. 通过 this.$route.params 获取params参数

2.通过 this.$route.query 获取query参数

3.通过 this.$route.path 获取当前路径（用于路径匹配等....）

4.通过 this.$route.fullPath 获取当前完整路径

5.通过 this.$route.name 获取当前路由渲染组件的名称

下面是对应的路由信息：

{
    name: 'father',  与this.$route的name属性对应
    path: '/father',  与this.$route的path属性对应
    component: father
},

---

this.$router:

$router对象是全局路由的实例，是router构造方法的实例。

这里我是运用java的知识理解，实例也就是实例化，相当于new一个router对象。

在这个router对象上，我们可以操作router对象所拥有的各种方法。

操作路由(跳转 前进 后退等)

这里的前进后退是指：假如 我从 /a  跳转到 /b  

当我在b页面点击后退，就是回到a页面。

回到a页面之后，点击前进就可以回到b页面。

跳转是指指定一个路由，点击后跳转到此路由。

以上的点击事件并不是必须，也可以通过各种方式触发路由跳转，这里是举个例子。

列举几种常用router操作： 

1.this.$router.push('about') 跳转到about路由

2.this.$router.go(1) 通过值来进行前进后退跳转 1表示向前跳转一个页面 负数标识向后

3.this.$router.replace('/') 上面我们进行的push go操作都会向history栈添加一个记录，但replace不会，它会替代原来的记录。

4.也可以通过this.$router.history.current 效果与 this.$route 一样，如图：