## 一、概述 route路由对象 (或路由记录）表示路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 ## 二、定义 routes是一组route构成的数组对象，它是router的必要构造选项对象；每个route都是`RouteConfig`对象，该对象定义如下结构： ```html interface RouteConfig = { path: string, //pages.json中的path 必须加上 '/' 开头 component?: Component, //H5端可用 name?: string, // 命名路由 components?: { [name: string]: Component }, // 命名视图组件，H5端可用 redirect?: string | Location | Function, //H5端可用 props?: boolean | Object | Function, //H5端可用 aliasPath?:string, //h5端 设置一个别名路径来替换 uni-app的默认路径 alias?: string | Array<string>, //H5端可用 children?: Array<RouteConfig>, // 嵌套路由，H5端可用 beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由元守卫 meta?: any, //其它参数 // 2.6.0+ caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false) pathToRegexpOptions?: Object // 编译正则的选项 } ``` ## 三、路由元信息 定义路由的时候可以配置 `meta` 字段： ``` const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta: { requiresAuth: true } } ] } ] }) ``` 那么如何访问这个`meta`字段呢？ 路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录 。 例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的一个路由匹配到的所有路由记录会暴露为`$route`对象 (还有在导航守卫中的路由对象) 的`$route.matched`数组。因此，我们需要遍历`$route.matched`来检查路由记录中的`meta`字段。 下面例子展示在全局导航守卫中检查元字段： ``` router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, redirect to login page. if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 确保一定要调用 next() } }) ``` ## 四、属性 * **$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`数组)。 ~~~ const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo', component: Foo, children: [ // 这也是个路由记录 { path: 'bar', component: Bar } ] } ] }) ~~~ 当 URL 为`/foo/bar`，`$route.matched`将会是一个包含从上到下的所有对象 (副本)。 * **$route.name** 当前路由的名称，如果有的话。 * **$route.redirectedFrom** 如果存在重定向，即为重定向来源的路由的名字。