vue-router学习笔记（使用技巧）

1.路由元信息

• 定义路由的时候可以配置 meta 字段

{
      path: 'login',
      name: 'login',
      component: Login,
      query: {}, //不保留历史记录，即不能返回到登录页面
      meta: {
        navbar: false,
        requireAuth: false
      }
}

• 利用$route.meta.xx进行调用

  <my-footer v-show="$route.meta.navbar"></my-footer> //控制是否显示底部菜单

• 利用$route.matched来检查mate字段

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login'；
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

2.过渡效果

<transition>
  <router-view></router-view>
</transition>

Vue提供的过渡效果

3.数据获取

• 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}	

• 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      next(vm => vm.setData(err, post))
    })
  },
  // 路由改变前，组件就已经渲染完了
  // 逻辑稍稍不同
  beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },
  methods: {
    setData (err, post) {
      if (err) {
        this.error = err.toString()
      } else {
        this.post = post
      }
    }
  }
}

4.路由滚动

当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置

 scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
 }

 to:目标路由
 from：当前路由
 savedPosition：popstate 导航 (通过浏览器的 前进/后退 按钮触发) 

• 返回类型

{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

• 浏览器原生表现

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

• 模拟滚动到锚点

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

• 异步滚动（常用于页面级别的过渡）

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}