라우트 오류 관리하기

라우트 오류 관리하기

by SUNG BIN CHO

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<div id="app">
  <h1>My Portfolio</h1>
  <ul>
    <li>
      <router-link to="/" exact>Home</router-link>
    </li>
    <li>
      <router-link to="/aboutme">About Me</router-link>
    </li>
  </ul>
  <router-view></router-view>
  <div class="toast" v-show="showError">
    There was an error
  </div>
</div>

CSS

div.toast {
  width: 15em;
  height: 1em;
  position: fixed;
  bottom: 1em;
  background-color: red;
  color: white;
  padding: 1em;
  text-align: center;
}

JavaScript

let vm
const AboutMe = Vue.component('aboutme', {
  template: `<div>Name:{{name}}<br>Pone:{{phone}}</div>`,
  data() {
    return {
      name: undefined,
      phone: undefined
    }
  },
  beforeRouteEnter(to, from, next) {
    axios.post('http://example.com/', {
      "type": "object",
      "properties": {
        "name": {
          "type": "string",
          "ipsum": "name"
        },
        "phone": {
          "type": "string",
          "format": "phone"
        }
      }
    }).then(response => {
      next(vm => {
        vm.name = response.data.name
        vm.phone = response.data.phone
      })
    }).catch(error => {
      vm.showError = true
      next(false)
    })
  }
})
Vue.use(VueRouter)
const Home = {
  template: '<div>This is my home page</div>'
}
const router = new VueRouter({
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/aboutme',
      component: AboutMe
    },
  ]
})
vm = new Vue({
  router,
  el: '#app',
  data: {
    showError: false
  }
})