美文网首页
vue 进入新的路由,获取数据情景

vue 进入新的路由,获取数据情景

作者: Mr无愧于心 | 来源:发表于2019-01-14 09:16 被阅读0次

    分为两种方式获取

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

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

    导航完成之后获取数据(监听$route的变化)

    假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

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

    导航完成之前获取(beforeRouteUpdate)

    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
          }
        }
      }
    }
    

    相关文章

      网友评论

          本文标题:vue 进入新的路由,获取数据情景

          本文链接:https://www.haomeiwen.com/subject/rkdxdqtx.html