404的应用场景我们这里就不多加描述了，先来看最终效果：

设置步骤：

1、在router》index.js中设置404路由。

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../view/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '*', // 404 页面
      component: () => import('@/view/404') 
    },

  ]
})

注：这里的404必须放在所有路由的最后面！

2、在vue中设置404页面，这里页面样式可以根据自己的需求来进行处理，就不贴详细代码了。

结果预测：当在浏览器中输入未在路由中设置的路径时，页面会重新定义到404页面。给用户提示当前页面不存在，从而进行返回上一步或者回到首页操作流程。