router的使用方法详解(2)

const router = new VueRouter({ routes: [ // 下面的对象就是 route record { path: '/foo', component: Foo, children: [ // 这也是个 route record { path: 'bar', component: Bar } ] } ] })

当 URL 为 /foo/bar,$route.matched 将会是一个包含从上到下的所有对象(副本)

$route.name

当前路由的名称,如果有的话

Router构造配置 routes

类型: Array<RouteConfig>

RouteConfig 的类型定义:

declare type RouteConfig = { path: string; component?: Component; name?: string; // for named routes (命名路由) components?: { [name: string]: Component }; // for named views (命名视图组件) redirect?: string | Location | Function; alias?: string | Array<string>; children?: Array<RouteConfig>; // for nested routes (嵌套路由) beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any; }

mode

类型: string

默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

可选值: "hash" | "history" | "abstract"

配置路由模式

1、hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器

2、history: 依赖 HTML5 History API 和服务器配置

3、abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式

base

类型: string

默认值: "https://www.jb51.net/"

应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

linkActiveClass

类型: string

默认值: "router-link-active"

全局配置 <router-link> 的默认『激活 class 类名』

scrollBehavior

类型: Function

签名:

( to: Route, from: Route, savedPosition?: { x: number, y: number } ) => { x: number, y: number } | { selector: string } | ?{}

Router实例 属性 router.app

类型: Vue instance

配置了 router 的 Vue 根实例

router.mode

类型: string

路由使用的 模式

router.currentRoute

类型: Route

当前路由对应的路由信息对象

方法

router.beforeEach(guard)

router.beforeResolve(guard) (2.5.0+): 此时异步组件已经加载完成

router.afterEach(hook):增加全局的导航钩子

router.push(location, onComplete?, onAbort?)

router.replace(location, onComplete?, onAbort?)

router.go(n)

router.back()

router.forward():动态的导航到一个新 url

router.getMatchedComponents(location?)

返回目标位置或是当前路由匹配的组件数组(是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时

router.resolve(location, current?, append?)

解析目标位置(格式和 <router-link> 的 to prop 一样),返回包含如下属性的对象

{ location:Location; route:Route; href:string; } router.addRoutes(routes)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组

router.onReady(callback)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7fb077f7591fdb58871d073b6566652c.html