vue3整合router，配置路由守卫实现404拦截

后端nginx配置

location / {
    root ...
    index ...
    try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}

前端废话不多说，直接上代码

router index.ts

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  ErrorHandler,
} from 'vue-router'
// 引入路由守卫方法
import beforeEach from './beforeEach'
const home = () => import('../components/Home.vue')
const login = () => import('../components/Login.vue')
const page404 = () => import('../components/404.vue')

const routes = [
  { path: '/', redirect: '/login' },
  {
    path: '/login',
    name: 'login',
    component: login,
  },
  {
    path: '/home',
    name: 'home',
    component: home,
  },
  {
    path: '/404',
    name: '404',
    component: page404,
  },
]

const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory('/'),
  routes: routes,
})

/**
 * 路由守卫
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router)
})

/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log('error:', handler)
})

/**
 * 输出对象
 */
export default router

router beforeEach.ts

import { Router } from 'vue-router'
export default {
  /**
   * 路由守卫检查权限
   * @param guard
   * @param router
   */
  checkAuth(guard: any, router: Router) {
    //检查路由是否存在
    if (!router.hasRoute(guard.name)) {
      //三层不同404路由
      if (guard.fullPath.indexOf('/frame') >= 0) {
        router.push('/404')
      } else if (guard.fullPath.indexOf('/pages') >= 0) {
        router.push('/404')
      } else {
        router.push('/404')
      }
      return
    }
  },
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './route'
import 'animate.css/animate.min.css' //引入

createApp(App).use(router).mount('#app')

app.vue

<script setup lang="ts">
import Login from './components/Login.vue'
</script>

<template>
  <div class="main animated shake">
    <router-view></router-view>
  </div>
</template>

<style>
.main {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  padding-top: 10%;
}
</style>

login.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const home = () => {
  router.push({
    name: 'home',
  })
}

const go404 = () => {
  router.push({
    name: '404',
  })
}

const goBack = () => {
  router.push({
    name: 'goBack',
  })
}
</script>

<template>
  <!-- 样式绑定 -->
  <p>我是登录页</p>
  <button @click="home">去首页</button>
  <button @click="go404">去404</button>
</template>

home.vue

<script setup lang="ts">
defineProps<{ msg: string }>()

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const login = () => {
  router.push({
    name: 'login',
  })
}
</script>

<template>
  <p>我是主页</p>
  <button @click="login">退出</button>
</template>

404.vue

<script setup lang="ts">
defineProps<{ msg: string }>()

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const login = () => {
  router.push({
    name: 'login',
  })
}
</script>

<template>
  <p>我是404</p>
  <button @click="login">返回登录</button>
</template>

看完还不懂？欢迎来骚扰