vue 配置404

为什么要给项目设置404页面？404一般指http状态码404,代表not found 找不到页面的意思。如果我们的项目设置了404页面，如果用户访问的页面不存在时，就会跳转到我们定制的404页面，对于用户的体验比较好。不设置的话，一般vue都是显示一个白屏的页面。显得十分的不友好。

router.js

在router.js 中配置项目所有的路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//配置路由
const routes = [
    {
        path:"/",
        component:import('./pages/index/index.vue')
    },
    {
        path:"/order",
        component:import('./pages/order/index.vue')
    },
    {
        path:'/404',
        component:import('./components/error/noFound.vue')
    },
    {
        path:'*',
        redirect:'/404'
    }
]

//注意：
// *号需要放在最后一个，如果有路由放在星号下面，永远都无法到达。
// *号放在最后一个的意思是，当前面的所有路由都无法匹配时，就执行*号的路由。

//创建路由
const router = new VueRouter({
    routes
})

export default router

main.js

在main.js入口文件中，主要是挂载vue-router的路由。

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

总结

主要就是在路由文件最后配置一个带*号的路由，然后再给*号路由配置一个组件。当所有路由都不匹配时，就会匹配 *号。然后可以根据自己项目的风格设置404页面。

 {
     path:'/404',
     component:import('./components/error/noFound.vue')
 },
 {
     path:'*',
     redirect:'/404'
 }