[Vuejs]-How to load component for not existing route? 404 component for vue + webpack

by

2👍

✅

Use a catch all route at the end of your list of routes.

const routes = [
  {
      path:'/',
      component:Home,
  },
  {
      path: "*",
      component: NotFound
  }
]

Here is an example.

console.clear()

const Foo = { template: '<div>foo</div>' }
const NotFound = { template: '<div>404 page</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '*', component: NotFound }
]

const router = new VueRouter({
  routes 
})

const app = new Vue({
  router
}).$mount('#app')
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.js"></script>

<div id="app">
  <router-view></router-view>
</div>
👤Bert

Leave a comment