vue-router配置404页面

1、创建404.vue文件

<template>
  <div>
    404页面
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {}
  },
  methods:{}
}
</script>

<style scoped></style>

2、在路由配置文件index.js中进行路由配置

import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import testRouter1 from '@/components/testRouter1';
import testRouter2 from '@/components/testRouter2';
import testRouter3 from '@/components/testRouter3';
import notFound from '@/components/404';

Vue.use(Router);
export default new Roter({
 routes:[
  {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path: '/helloWorld',
        name: 'HelloWorld',
        component: HelloWorld
      },
      {
        path:'/testRouter1',
        name:'TestRouter1',
        component:testRouter1
      },
      {
        path:'/testRouter2',
        name:'TestRouter2',
        component:testRouter2
      },
      //动态路由
      {
        path:'/testRouter3/:id',
        name:'TestRouter3',
        component:testRouter3
      },
      //通常使用通配符进行配置404页面
      {
        path: '*',
        component:notFound
      }
 ]
})