vue中设置404错误页面操作步骤

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

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页面。给用户提示当前页面不存在,从而进行返回上一步或者回到首页操作流程。