一、联系和区别
1、$router
$router
是VueRouter实例
import Vue from 'vue'
import VueRouter from 'vue-router'
const User = () => import('../components/User')
//1.通过Vue.use(插件)安装插件,会去执行插件的install方法
Vue.use(Router)
const routes = [
{
path:'/user',
component:User
}
]
//2.创建路由对象,$router就是这里创建的对象
const router = new VueRouter({
routes
});
//3.导出
export default router
如何验证?
在随便一个组件中打印一下 this.$router
,因为我们在main.js文件中导入了router对象,在main.js文件中再打印一下导入的router对象。两者是一样的。
2、$route
this.$route
指向当前处于活跃状态的路由对象,可以获取当前路由的 path, name, params, query 等属性。
一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。
路由对象的属性:
-
$route.path:类型: string字符串,对应当前路由的路径,总是解析为绝对路径,如 “/foo/bar”。
-
$route.params:类型: Object,一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。
-
$route.query:类型: Object,一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。
-
$route.hash:类型: string,当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
-
$route.fullPath:类型: string,完成解析后的 URL,包含查询参数和 hash 的完整路径。
-
$route.name:当前路由的名称,如果有的话。(查看 命名路由 | Vue Router官网 )
-
$route.redirectedFrom:如果存在重定向,即为重定向来源的路由的名字。(参阅 重定向和别名 | Vue Router官网)
-
$route.matched:类型:
Array<RouteRecord>
,一个数组,包含当前路由的所有嵌套路径片段的路由记录 。 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
const router = new VueRouter({
routes: [
// 下面的对象就是路由记录
{
path: '/foo',
component: Foo,
children: [
// 这也是个路由记录
{
path: 'bar', component: Bar }
]
}
]
})
二、为什么所有组件都可以使用 $router 和 $route ?
因为所有的组件都继承自Vue实例,而在 Vue.prototype
上定义了 $router 和 $route 两个属性。
在任意一个组件中中打印一下 this (当前组件实例) ,我们看一下它的原型链
在 vue-router的源码中有这样一段代码:
Object.defineProperty(Vue.prototype, '$router', {
get () {
return this._routerRoot._router }
})
Object.defineProperty(Vue.prototype, '$route', {
get () {
return this._routerRoot._route }
})
三、资料
https://github.com/vuejs/vue-router/tree/v3.4.9