面试题：Vue中如何实现Vue Router的404页面

Question

在Vue项目中，使用Vue Router时，阐述实现404页面的具体步骤，包括路由配置等方面。

Answer 1

1. 路由配置： 在router/index.js文件中，配置一个path: '*'的路由，该路由指向404页面的组件。例如：

import Vue from 'vue';
import Router from 'vue-router';
import NotFound from '@/components/NotFound.vue';

Vue.use(Router);

export default new Router({
  routes: [
    // 其他正常路由配置...
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
});

2. 创建404页面组件： 在components目录下创建NotFound.vue组件，编写404页面的HTML、CSS和逻辑代码。例如：

<template>
  <div>
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
  </div>
</template>

<script>
export default {
  name: 'NotFound'
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>