最近在进行公司项目迭代,项目是两年前的,使用的是vue框架。*_*我是vue小白*_*,在修改代码的过程中,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router和$route,有些傻傻分不清,后来自己结合网上的博客和自己本地的Vue devtools(vue调试工具)结构了解了它们的区别
router是Vue的一个实例
通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象是一个全局对象。它包含了所有的路由以及许多关键的对象和属性。
// 举例 history对象
$router.push({path:'home'})
// 本质上是向history栈中添加一个路由,在我们看来是切换路由,其实是在添加一个history记录
$router路由实例方法:
- push
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
push方法其实和<router-link :to="...">是等同的。
注意:push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
- go
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
- replace
// 替换路由 没有历史记录
$router.replace({path:'home'});
// 一般使用replace来做404页面this.$router.replace('/')
route是一个跳转路由的对象
每一个路由都会有route对象,它是一个局部对象。$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等
- path
$route.path
字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
- params
$route.params
一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。
- query
$route.query
一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
如果没有查询参数,则是个空对象。
- hash
$route.hash
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
- fullPath
$route.fullPath
完成解析后的 URL,包含查询参数和 hash 的完整路径。
- matched
$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
- name
$route.name 当前路径名字
- meta
$route.meta 路由元信息