## 一、概述 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** 如果存在重定向，即為重定向來源的路由的名字。