Vue router

Vue Router

1. 在Vue中引入router

var app = new Vue({
  router
}).$mount('#app')

2. 新建路由

如：

var router = new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [……]
})

var RouterConfig = {
  routes: Array<RouteConfig>,
  mode: "hash" | "history" | "abstract",
  base: string,  // 应用基路径
  linkActiveClass: string, // <router-link> 的默认『激活 class 类名』,默认值: "router-link-active"
  linkExactActiveClass: string, // <router-link> 的精确激活的默认的 class, 默认值: "router-link-exact-active"
  scrollBehavior: Function,
  parseQuery: Function, // 自定义查询字符串的解析函数
  stringifyQuery: Function, // 自定义查询字符串的反解析函数
  fallback: boolean // 浏览器不支持history模式时，是否应该回退到 hash 模式
}

scrollBehavior更多详情参考滚动行为。

3. RouteConfig

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

  // 2.6.0+
  caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)
  pathToRegexpOptions?: Object; // 编译正则的选项
}

redirect

用于重定向至另一个路径

redirect: string | route // route是一个路径对象
//  或者
redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
}

其它高级用法，请参考例子

alias

别名，更多高级用法，请查看例子

props

向组件传递参数，props的三种模式

1. 布尔模式

components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }

router.params被设置为组件的属性

2. 对象模式

props: { newsletterPopup: false }

props按原样被设置为组件的属性

3. 函数模式

props: route => ({ id: route.query.id })

/search?id=3421，{ id: 3421}会作为属性，传递给组件

4 导航守卫

__beforeEach__：全局守卫
__beforeEnter__：路由独享的守卫
__beforeRouteEnter__：组件守卫，当前组件路由confirm前调用，不能获取this
__beforeRouteUpdate__：路由改变，当前组件被复用时调用
__beforeRouteLeave__：组件守卫，离开当前组件路由时调用，可以获取到this

导航钩子(gurad) : (to, from, next) => {……}

• to：Route，目标路由对象
• from: Route，要离开的路由对象
• next
next(): 进入管道中的下一个钩子
  next(false): 中断当前导航
  next(Error): 导航被中断，并且错误被传递给 router.onError注册的回调函数
  next('/'): 跳转到一个不同的地址，参数是一个Route对象或者string
  next(vm => { // 通过 vm访问组件实例 }): 在beforeRouteEnter中不能获取到组件实例，可以将组件实例传递给next的回调函数，在导航被确认后，执行回调函数

完整的导航解析流程

1. 导航被触发
2. 在离开的组件中调用beforeRouteLeave
3. 调用全局的beforeEach
4. 调用重用组件的beforeRouteUpdate
5. 调用路由中的beforeEnter
6. 解析异步路由组件。
7. 在目标组件中触发beforeRouteEnter
8. 调用全局的beforeResolve
9. 导航被确认
10. 调用全局的afterEach
11. 触发DOM更新
12. 执行beforeRouteEnter的next中的回调函数

5. 编程式导航router

router.push(location, onComplete?, onAbort?): 向 history 添加新记录
router.replace(location, onComplete?, onAbort?): 用新纪录替换掉history中的当前记录

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

声明式导航

<router-link :to="..." replace>  // router.replace(...)
<router-link :to="...">  // router.push(...)
<router-link :to="{ path: 'relative/path'}" append></router-link> // 从 /a 导航到一个相对路径 b, append后会导航到/a/b

5 router实例

属性

router.app: 获取根实例
router.mode: 路由使用的模式
router.currentRoute: 当前路由对应的路由信息元对象

方法

router.beforeEach(guard)
router.beforeResolve(guard)
router.afterEach(hook)
更多查看Router 实例

6 视图

用于同级展示多个视图，比如，有左边（导航）、右边（广告信息等）、中间（主内容）三部分视图

<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Main,
        left: Left,
        right: Right
      }
    }
  ]
})

7 路由信息对象

route object 是 immutable（不可变） 的，出现在多个地方

1. 在组件内， this.$route
2. 在 $route 观察者回调内
3. router.match(location)的返回值
4. 导航钩子参数to、from
   路由对象信息的属性

• path
• fullPath
• params
• query
• hash: 路由hash值，带#
• name
• matched：Array<RouteRecord>，包含当前路由的所有嵌套路径片段的路由记录

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

懒加载

const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})