(图片来源于网络,如侵删)
$router(是VueRouter的实例对象)
在组件中可以通过this.$router访问路由器,相当于访问到整个路由文件(this.$router.option.routes),因为整个应用只能有一个router.同时可以查看整个项目具有的路由实例方法.
(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 (监测) 它。
fullPath: "" // 当前路由完整路径(#后面的完整路径)，包含查询参数
hash: "" // 当前路由的锚点
matched: [] // 包含当前路由的所有嵌套路径片段的路由记录
meta: {} // 路由文件中的自定义路由元信息
name: "" // 命名的路由名称
params: {} // 一个 key/value 对象，包含了动态片段和全匹配片段就是一个空对象。
path: "" // 当前的路由的路径
query: {} // 一个 key/value 对象，表示 URL 查询参数,即'?'后的参数
最后
希望整理的信息对您有所帮助,如果有什么建议,欢迎在评论区留言
不足之处还请批评指教,谢谢!
