Vue router

2017-12-18  本文已影响164人  pixels

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被设置为组件的属性

  1. 对象模式
props: { newsletterPopup: false }

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

  1. 函数模式
props: route => ({ id: route.query.id })

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

4 导航守卫

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

导航钩子(gurad) : (to, from, 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
    路由对象信息的属性
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 }
  ]
})
上一篇 下一篇

猜你喜欢

热点阅读