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)