$route和$router的区别

$route和$router的区别

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

this.$router.push({
      path:'/home',   路由地址
      name:'home',   路由名字
      query:{name:'张三'}， 路由参数 相当于：/home?name= '张三'
      params:{name:'李四'}   路由参数键值对 
})

1. $route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 “/order”。
2. $route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象
3. $route.query一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user为1，如果没有查询参数，则是个空对象。
4. $route.hash当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
5. $route.fullPath完成解析后的 URL，包含查询参数和 hash 的完整路径。
6. $route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
7. $route.name 当前路径名字

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

$router常见跳转方法:

<button @click="goToMenu" class="btn btn-success">Let's order！</button>
.....
<script>
  export default{
    methods:{
      goToMenu(){
        this.$router.go(-1)//跳转到上一次浏览的页面
        this.$router.replace('/menu')//指定跳转的地址
        this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
        this.$router.push('/menu')//通过push进行跳转
        this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下
      }
    }
  }
</script>

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

1. 使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
2. 使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。