$router(是VueRouter的实例对象)
在组件中可以通过this.router.option.routes),因为整个应用只能有一个router.同时可以查看整个项目具有的路由实例方法.
image.png
(1)全局导航钩子
router.beforeEach((to, from, next) => { //前置路由守卫
// 省略代码...
next() // 必须使用
})
router.beforeResolve((to, from, next) => { //解析路由守卫,在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
// 省略代码...
next() // 必须使用
})
router.afterEach((to, from) => { //后置路由守卫
// 省略代码...
})
(2)常用的原型方法
this.$router.forward() //前进一步
this.$router.back() //后退一步
this.$router.go(number) //可前进也可后退(number为正数前进,为负数后退)
(3)编程式导航
this.$router.push() //跳转到指定页面
this.$router.replace() //替换当前页面,此方法无法后退到跳转前页面
$route(存储当前组件的全部路由信息)
存储了当前组件的全部路由信息对象,是只读属性，可以 watch (监测) 它。
image.png
fullPath: "" // 当前路由完整路径(#后面的完整路径)，包含查询参数
hash: "" // 当前路由的锚点
matched: [] // 包含当前路由的所有嵌套路径片段的路由记录
meta: {} // 路由文件中的自定义路由元信息
name: "" // 命名的路由名称
params: {} // 一个 key/value 对象，包含了动态片段和全匹配片段就是一个空对象。
path: "" // 当前的路由的路径
query: {} // 一个 key/value 对象，表示 URL 查询参数,即'?'后的参数
