本文目标在于区分两者，关于router的详细使用请参照官网https://router.vuejs.org/zh/
前言：this.$router其实是将Vue-Router注入到Vue实例的结果（vue.use()），从而避免每次使用都导入路由。
一. $router
- Vue-Router中的router对象效仿了原生的history对象，用于控制路由跳转。
| 方法 | 描述 |
|---|---|
| push() | 往history 栈添加一个新的记录，实现跳转 |
| replace() | 换掉当前的 history 记录 |
| go(n) | 在 history 记录中向前或者后退n步 |
back(){
this.$router.push({path:'/'});
},
二. $route
-
$route记录了当前路由信息
url
$route
| 字段 | 描述 |
|---|---|
| path | 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/book/news" |
| query | 对象，表示 URL 查询参数。如果没有查询参数，则是个空对象。 |
| params | 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。 |
| fullPath | 完成解析后的 URL，包含查询参数和 hash 的完整路径 |
| name | 当前路径名字 |
| meta | 路由元信息 |
| matched | 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 |
| redirectedFrom | 如果存在重定向，即为重定向来源的路由的名字 |
| hash | 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。 |
网友评论