Vue 路由对象
1、一个路由对象表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录。
2、路由对象是不可变的,每次成功后的导航后都会产生一个新的 对象。
3、路由对象出现在多个地方:
- 在组件内,即this.$route;
- 在$route观察者回调内;
- router.match(location)的返回值
- 导航守卫的参数:router.beforeEach((to,from,next)=> {// to 和from 都是路由对象})
- scrollBehavior方法的参数:const router = new VueRouter({ scrollBehavior(to,from,savedPosition){ // to 和 from都是路由参数 } })
4、路由对象属性:
- $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.matched: 类型:Array<RouteRecord>;一个数组,包含当前路由的所有嵌套路径片段的路由记录,路由记录就是routes配置数组中的对象副本(还有在children数组)
- $route.name: 当前路由的名称,如果有的话就展示;
- $route.redirectedFrom: 如果存在重定向,即为重定向来源的路由的名字