```javascript $route 和 $router 的区别 $router是VueRouter的实例，包括了路由的跳转方法，钩子函数等。在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1) $route为当前router跳转对象。路由信息对象，里面可以获取当前路由的name,path,query,parmas等。 ``` * **$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常见跳转方法:** ~~~ <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`的区别**： * 使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。 * 使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。