vue-router

1. router

1. 引入VueRouter Vue.use(VueRouter)
2. 定义 (路由) 组件 const Foo = { template: '
   foo
   ' }
3. 创建 router 实例 const router = new VueRouter({routes:[ { path: '/foo', component: Foo }]})
4. 创建和挂载根实例 const app = new Vue({router}).$mount('#app')

2. router基础

  #：路由导航，默认渲染成标签  
  to:string | Location  # 目标路由的链接  
  replace:boolean   # 是否留下 history 记录，默认值false  
  append:boolean   # 是否为相对路径，默认值false  
  tag:string   # 渲染指定标签，默认值标签  
  active-class:string   # 链接激活样式，默认值"router-link-active"  
  exact:boolean   # 是否精准匹配，默认值false  
  event:string | Array   # 触发导航的事件，默认值'click'  
  exact-active-class: string   # 精准匹配激活样式，默认值'router-link-exact-active'

:渲染路径匹配到的视图组件  
  #可配合和使用：transition>keep-alive>router-view
  name:string  #设置名称，会渲染对应的路由配置中components下的相应组件  

3. router构建选项

//  类型: Array
routes:[
 {  
  path: string;  // 路径
  component?: Component; // 对应的vue页面
  name?: string;  // 命名路由
  components?: { [name: string]: Component };  // 命名视图组件
  redirect?: string | Location | Function;  // 重定向
  props?: boolean | Object | Function;
  alias?: string | Array;  // 别名
  children?: Array;  // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void;
  meta?: any; // 路由信息 使用$route.meta.属性可以获取

  // 2.6.0+
  caseSensitive?: boolean;  // 匹配规则大小写是否敏感？(默认值：false)
  pathToRegexpOptions?: Object;  // 编译正则的选项
}
]
mode:"hash" | "history" | "abstract"   // 路由模式,默认值"hash"  
base:string   // 应用的基路径,默认值"/"  
linkActiveClass:string   // 激活 class 类名,默认值"router-link-active"  
linkExactActiveClass:string   // 精确激活的默认的 class,默认值"router-link-exact-active"  
scrollBehavior:Function   // 滚动行为  
parseQuery / stringifyQuery:Function   // 提供自定义查询字符串的解析/反解析函数  
fallback:boolean   // 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式
// history模式需要history.pushState来支持，这是h5新引入的方法。hash模式这没有这个条件。

动态路由：使用冒号:标记 如/user/:id。参数值会被设置到 this.$route.params
使用所有路由：通配符*
高级匹配模式： 使用 path-to-regexp
同一路径匹配的多个路由，匹配的优先级按路由定义顺序。

4. Router实例属性和方法

#实例属性
router.app: Vue instance  // Vue 根实例  
router.mode: string   // 路由使用的模式  
router.currentRoute: Route  // 当前路由对应的路由信息对象  

// 实例方法
// 增加全局的导航守卫
router.beforeEach((to, from, next) => { /* must call `next` */ })  
router.beforeResolve((to, from, next) => { /* must call `next` */ })  
router.afterEach((to, from) => {})  

// 动态的导航到一个新 URL
router.push(location, onComplete?, onAbort?)  
router.replace(location, onComplete?, onAbort?)  
router.go(n)  
router.back()  
router.forward()

router.getMatchedComponents(location)  // 返回目标位置或是当前路由匹配的组件数组  
router.resolve(location, current, append) // 解析目标位置  
router.addRoutes(routes: Array)  // 动态添加更多的路由规则  
router.onReady(callback, [errorCallback])  // 回调函数，路由完成初始导航时调用  
router.onError(callback)   // 回调函数，路由导航过程中出错时被调用  

5. router对象

$router 是router（路由）实例；$route 是一个对象，可以访问path，name等属性。还有就是route object 是只读的，不可变的，所以我们不能更改其中的值。

//  路由对象属性
$route.path: string  // 当前路由的路径，总是解析为绝对路径
$route.params: Object  // 包含了动态片段和全匹配片段
$route.query: Object  // 表示 URL 查询参数
$route.hash: string  // 当前路由的 hash 值
$route.fullPath: string  // 完成解析后的 URL
$route.matched: Array  // 当前路由的所有嵌套路径片段的路由记录   
$route.name  // 当前路由的名称
$route.redirectedFrom  // 重定向来源的路由的名字
// 组件注入
this.$router  // router 实例  
this.$route  // 当前激活的路由信息对象(只读)