Skip to content

Vue Router – Route Meta & Data Fetching

Table of Contents

    Route Meta

    Dùng để đánh dấu cho route, giống như checkList. Khai báo ~ gì cần làm => sau đó kiểm tra lại ~ gì cần làm

    const routes = [
      {
        path: '/posts',
        component: PostsLayout,
        meta: { requiresAuth: true }
      }
    ]

    Usage

    router.beforeEach((to, from) => {
    
      // instead of having to check every route record with
      // to.matched.some(record => record.meta.requiresAuth)
    
      if (to.meta.requiresAuth && !auth.isLoggedIn()) {
        return {
          path: '/login',
          // save the location we were at to come back later
          query: { redirect: to.fullPath },
        }
      }
    })

    Data Fetching

    2 Cách : trước & sau khi thực hiện navigation

    Sau

    export default {
      data() {
        return {
          loading: false,
          post: null,
          error: null,
        }
      },
      created() {
        this.$watch(
          () => this.$route.params,
          () => {
            this.fetchData()
          },
          { immediate: true }
        )
      },
      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
            }
          })
        },
      },
    }

    Trước

    sử dụng beforeRouteEnter 

    export default {
      data() {
        return {
          post: null,
          error: null,
        }
      },
    
      beforeRouteEnter(to, from, next) {
        getPost(to.params.id, (err, post) => {
          next(vm => vm.setData(err, post))
        })
      },
    
      async beforeRouteUpdate(to, from) {
        this.post = null
        try {
          this.post = await getPost(to.params.id)
        } catch (error) {
          this.error = error.toString()
        }
      },
    }

    User sẽ chờ ở view cũ cho đến khi data đã được fetch hoàn toàn

    *Nên cho thêm Progress bar trong trường hợp này

    Khi data fetch fails => display warning là cần thiết

    Published inVue Router

    Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *