vueRouter-notes

vue-router 学习总结，持续跟进

基础

vue-router 路由管理器

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

动态路由匹配

//获取路由参数
this.$route.params.xxx

响应路由参数变化

//例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用, 组件的生命周期钩子不会再被调用。
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

编程式的导航

//声明式
<router-link :to="...">

//编程式
this.$route.push(location, onComplete?, onAbort?)

// path 和 params 不能同时使用
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
router.push({ path: 'register', query: { plan: 'private' }}) //带查询参数，变成 /register?plan=private

// 不向history添加新纪录，而是替换掉原来的history记录
// 编程式
this.$route.replace(location, onComplete?, onAbort?) 
//声明式
<router-link :to="..." replace>

// n 为整数, 类似window.history.go(n)
router.go(n)

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

命名路由

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({ name: 'user', params: { userId: 123 }})

重定向和别名

const router = new VueRouter({
   routes: [
      {path: '/a', redirect: '/b'},
      {path: '/a', redirect: to => {
        // 方法接收 目标路由 作为参数
        // return 重定向的 字符串路径/路径对象}},
        
      { path: '/a', component: A, alias: '/b' } //别名
   ]
})

History 模式

// http://yoursite.com/user/id
const router = new VueRouter({
  mode: 'history',  //默认hash模式
  //history模式, 服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。
  //为了避免，应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

进阶

导航守卫

主要用来通过跳转或取消的方式守卫导航, 参数或查询的改变并不会触发进入/离开的导航守卫

全局守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next:  Function: 一定要调用该方法来 resolve 这个钩子
    //next(): 进行管道中的下一个钩子
    //next(false): 中断当前的导航
    //next(任意位置)
    //next(error)： 导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
})

全局后置钩子

router.afterEach((to, from) => {
  // ...
})

路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

路由元信息

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {  //自定义方法, 判断是否登陆
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

滚动行为

注意: 这个功能只在支持 history.pushState 的浏览器中可用

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // to 和 from 路由对象, savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    if (savedPosition) {
      return savedPosition
    } else if (to.hash) { // 模拟'滚动到锚点'
      return {
        selector: to.hash
      }
    } else {
      return { x: 0, y: 0 }
    }
  }
  
  //异步滚动
  scrollBehavior (to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ x: 0, y: 0 })
      }, 500)
    })
  }
})

数据获取

参考

1. 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
2. 导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。

路由懒加载

const tvProgram = resolve => require(['@/page/tvProgram'], resolve);