1. router
- 引入VueRouter
Vue.use(VueRouter)- 定义 (路由) 组件
const Foo = { template: '<div>foo</div>' }- 创建 router 实例
const router = new VueRouter({routes:[ { path: '/foo', component: Foo }]})- 创建和挂载根实例
const app = new Vue({router}).$mount('#app')
2. router基础
<router-link></router-link> #：路由导航，默认渲染成<a>标签
to:string | Location # 目标路由的链接
replace:boolean # 是否留下 history 记录，默认值false
append:boolean # 是否为相对路径，默认值false
tag:string # 渲染指定标签，默认值<a>标签
active-class:string # 链接激活样式，默认值"router-link-active"
exact:boolean # 是否精准匹配，默认值false
event:string | Array<string> # 触发导航的事件，默认值'click'
exact-active-class: string # 精准匹配激活样式，默认值'router-link-exact-active'
<router-view></router-view>:渲染路径匹配到的视图组件
#可配合<transition>和<keep-alive>使用：transition>keep-alive>router-view
name:string #设置名称，会渲染对应的路由配置中components下的相应组件
3. router构建选项
// 类型: Array<RouteConfig>
routes:[
{
path: string; // 路径
component?: Component; // 对应的vue页面
name?: string; // 命名路由
components?: { [name: string]: Component }; // 命名视图组件
redirect?: string | Location | Function; // 重定向
props?: boolean | Object | Function;
alias?: string | Array<string>; // 别名
children?: Array<RouteConfig>; // 嵌套路由
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<RouteConfig>) // 动态添加更多的路由规则
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<RouteRecord> // 当前路由的所有嵌套路径片段的路由记录
$route.name // 当前路由的名称
$route.redirectedFrom // 重定向来源的路由的名字
// 组件注入
this.$router // router 实例
this.$route // 当前激活的路由信息对象(只读)
