$router 和 $route

发表于 更新于 分类于

router

router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter) 和 VueRouter 构造函数得到一个 router 的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

1
举例：history 对象

$router.push({path:'home'}); 本质是向 history 栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个 history 记录
方法：

1
$router.replace({ path: "home" }); //替换路由，没有历史记录

route

route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name,path,params,query 等
我们可以从 vue devtools 中看到每个路由对象的不同

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

  • $route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。
  • $route.params 对象，包含路由中的动态片段和全匹配片段的键值对
  • $route.query 对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到 $route.query.favorite == ‘yes’ 。
  • $route.router 路由规则所属的路由器（以及其所属的组件）。
  • $route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  • $route.name 当前路径的名字，如果没有使用具名路径，则名字为空。