【Vue】Vue路由-404

作用 当路径找不到匹配时，给个提示页面

位置

404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

语法

path: “*” (任意路径) – 前面都不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

---

代码示例

NotFound.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router