vue中的$router和$route的区别

$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 查询参数,即'?'后的参数