VueRouter beforeRouteUpdate async await

https://stackoverflow.com/posts/69835022

by HuyPham55

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="	https://unpkg.com/[email protected]/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/path/1">An URL</router-link>
  <router-link to="/path/2">Another one</router-link>
  <router-link to="/path/3">And another one</router-link>
  <router-view :key="$route.path"></router-view>
</div>

JavaScript

let fetchData = async function() {
  return $.get("https://jsonplaceholder.typicode.com/todos/1");
}

Vue.use(VueRouter);

const cComponent = {
  data() {
    return {
      fetchedData: null
    }
  },
  template: `<div>{{$route.params.id+': '}}{{fetchedData}}</div>`,
  async beforeRouteEnter(to, from, next) {
    let data = await fetchData();
    next(vm => vm.fetchedData = data);
  },

  async beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    let data = await fetchData();
    this.fetchedData = data;
    next();
  }

}
const routes = [{
  path: "/path/:id",
  component: cComponent,
}]

const router = new VueRouter({
  mode: "history",
  routes,
})

const app = new Vue({
  el: "#app",
  router,
})