vue-router进阶笔记

开发过程中只使用过vue-router的导航守卫做权限，路由元信息做导航激活，其他知识点没有接触过，写个笔记加深理解。

1、导航守卫

可以用 router.beforeEach 注册一个全局前置守卫，可以根据需求，根据权限拦截页面跳转，或跳转会指定页面，比如登录页面。

router.beforeEach((to, from, next) => {
  // logic judgment
})

2、路由元信息

在定义路由时可以根据需求，配置meta字段，可用于tab name显示、是否keep-alive、导航菜单动态激活等。

  routes: [
    {
      path: '/home',
      component: home,
      children: [
        {
          path: 'index',
          component: Index,
          // a meta field
          meta: {
            name:'首页',
            isKeepAlive: false,
            tag:'index' 
         }
        }
      ]
    }
  ]
})

3、过渡动效

路由跳转中添加过渡效果，动画效果的定义，参考 https://cn.vuejs.org/v2/guide/transitions.html

<transition name="slide">
  <router-view></router-view>
</transition>

4、导航完成前获取数据

平时开发时，需要从服务端获取数据，主要在在导航完成后，在接下来的组件生命周期钩子中获取数据(例如 created mounted)，也就是进入页面后，正在加载中。

vue-router提供了，在导航完成前获取数据，即导航完成前，在路由进入守卫中获取数据，在数据获取成功后执行导航。

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(param, (err, post) => {
      next(vm => vm.setData(err, post))
    })
   }
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

5、滚动行为

使用前端路由，切换到新路由时，页面滚动停留在路由切换前页面停留的位置，这个功能可以设置页面滚动到顶部，或者保存原先的滚动的位置。

注：该功能只支持history.pushState的浏览器中可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

6、路由懒加载

路由懒加载，即将不同路由对应的组件分割成不同代码块，然后当路由被访问后才加载对应组件，提高页面加载效率。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

更多信息，查看链接：https://router.vuejs.org/zh/