如何为不存在的路线加载组件？ vue + webpack 的 404 组件

Question

我已经这样定义了我的路线：

const routes=[
{
    path:'/',
    component:Home,
}, ...

我想在访问者转到我的路线设置中未定义的路线时显示一个 vue webpack 组件我该怎么做？我的意思是，将 vue webpack 组件显示为 404 错误页面？谢谢

Answer 1

在路线列表的末尾使用捕获所有路线。

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

这是一个例子。

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>

如何为不存在的路线加载组件？ vue + webpack 的 404 组件

How to load component for not existing route? 404 component for vue + webpack

webpack

vue.js

vue-router

vuejs2