Vue2创建404页面

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

vue2使用路由将登陆的用户有无法识别的路径都跳转到404页面

---

一、404页面编写

<template>
    <div style="width: 100%;height: 100%" >
        <img src="../static/error_404.jpg" style="width: 100%;height: 100%">
    </div>
</template>

<script>
    export default {
        name: "notFound"
    }
</script>

<style scoped>

</style>

二、路由编写

1.引入404的路由

代码如下（示例）：

  {
    path: '/404',
    name: '404',
    component:()=>import('@/views/notFound')
  }

2.在路由守卫中设置跳转

代码如下：

//路由守卫
router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName",to.name) //设置当前的路由名称，为了在Header组件
  store.commit("setPath") //触发store的数据更新

  //未找到路由
  if (!to.matched.length) {
    const storeMenus = localStorage.getItem("menus")
    if (storeMenus){
      //如果有menus内容，说明已经登录过，跳到404
      next("/404") // 跳到
    }else{
      //如果没有menus内容，说明还没有登录过
      next("/login")
    }
  }
  //找到了就放行路由
  next(true)//放行路由
})

---

总结

苦厄难夺凌云志 不死终有出头日！！