如何爲不存在的路由加載組件？ 404組件，用於VUE +的WebPack

Question

我已經定義是這樣我的路線：

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

我想表現出VUE的WebPack組件當訪問者去，這是不是在我的路線定義的路由設置 如何我可以做嗎？我的意思是，將vue webpack組件顯示爲404錯誤頁面？ 謝謝

Answer 1

在路由列表末尾使用catch all路由。

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>