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

【问题标题】：How to load component for not existing route? 404 component for vue + webpack如何为不存在的路线加载组件？ vue + webpack 的 404 组件
【发布时间】：2017-10-05 17:22:36
【问题描述】：

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

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

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

【问题讨论】：

标签： webpack vue.js vuejs2 vue-router

【解决方案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>

【讨论】：