当前位置：首页 > wzjs >正文

法人变更在哪个网站做公示哪里长沙网站开发

wzjs 2025/9/12 0:37:45

法人变更在哪个网站做公示,哪里长沙网站开发,seo网络推广案例,网站开发相关英文单词系列文档目录 Vue3ViteTypeScript安装 Element Plus安装与配置主页设计与router配置静态菜单设计 Pinia引入 Header响应式菜单缩展 Mockjs引用与Axios封装登录设计登录成功跳转主页多用户动态加载菜单 Pinia持久化动态路由 -动态增加路由动态路由-动态删除…

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

Header响应式菜单缩展

Mockjs引用与Axios封装

登录设计

登录成功跳转主页

多用户动态加载菜单

Pinia持久化

动态路由 -动态增加路由

动态路由-动态删除路由

路由守卫

文章目录

系列文档目录

文章目录

前言

路由守卫

1.案例

2.增加404页面

3.官方说明

4.路由调整

5.测试效果

后续

参考文献

前言

在上一章节中，我们详细介绍了动态路由的删除方法。本章节将重点讨论404页面的创建以及如何通过路由守卫实现无路由跳转逻辑。

路由守卫

1.案例

在早期模拟数据阶段，有意未为个人资料设置路径，导致动态路由中缺少个人资料的相关路由。因此，当在菜单中选择“个人资料”时，界面上没有显示任何信息。同时在调试过程中出现了警告信息： [Vue Router warn]: No match found for location with path "/Userinfo" ，因此需要增加路由守卫。

2.增加404页面

在 src/views 目录下新增了一个 404.vue 文件，该文件用于定义404错误页面。当用户尝试访问不存在的路由时，系统将自动重定向到此404页面。

<template><div class="error-page"><div class="error-content"><h1 class="error-title">404</h1><h2 class="error-subtitle">页面未找到</h2><p class="error-description">您访问的页面不存在，可能是链接错误或页面已被删除。</p><el-buttontype="primary"@click="goBack"class="error-button":loading="loading">返回首页</el-button></div></div></template><script setup>import { useRouter } from "vue-router";import { ref } from "vue";const router = useRouter();const loading = ref(false);const goBack = () => {loading.value = true;setTimeout(() => {router.push("/");loading.value = false;}, 1000);};</script><style scoped>.error-page {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: #f5f5f5;}.error-content {text-align: center;animation: fadeIn 1s ease-in-out;}.error-title {font-size: 72px;color: #ff4d4f;margin-bottom: 20px;animation: bounceIn 1s ease-in-out;}.error-subtitle {font-size: 24px;color: #333;margin-bottom: 10px;}.error-description {font-size: 16px;color: #666;margin-bottom: 20px;}.error-button {font-size: 16px;padding: 10px 20px;animation: pulse 1s infinite;}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes bounceIn {0% {transform: scale(0);opacity: 0;}50% {transform: scale(1.2);opacity: 0.5;}100% {transform: scale(1);opacity: 1;}}@keyframes pulse {0% {transform: scale(1);box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);}70% {transform: scale(1);box-shadow: 0 0 10px 10px rgba(255, 77, 79, 0);}100% {transform: scale(1);box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);}}</style>

3.官方说明

具体请参考下面文档

导航守卫 | Vue Router

4.路由调整

路由守卫主要有全局前置守卫和通配符路由两种实现方式。为了在后期更好地加强权限管理和路由控制，本项目采用全局前置守卫模式。

方法1：全局前置守卫

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Main from '@/views/Main.vue'; //
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';
// import 404 from '@/views/404.vue';
import NotFound from "@/views/404.vue"; // 导入 404 页面组件// 定义路由配置
const routes: RouteRecordRaw[] = [{path: '/',name: 'main',component: Main,redirect: { name: 'login' }, // 默认重定向到 login 子路由children: [{path: 'home',name: 'home',component: Home,}],},{path: '/login',name: 'login',component: Login,},{path: '/main', // 如果确实需要 /main 路径redirect: { name: 'home' }, // 仅保留重定向规则},// 其他路由配置...{//path: "/:pathMatch(.*)*", // 通配符路由path: '/404', // 定义一个显式的 404 页面路由name: "404",component: NotFound,},
];// 创建路由器
const router = createRouter({history: createWebHistory(),routes, // 使用已定义的路由配置
});// 全局前置守卫
router.beforeEach((to, from, next) => {if (to.matched.length === 0) {next({ name: "404" }); // 如果没有匹配的路由，跳转到 404 页面} else {next();}
});export default router;

方案2：通配符路由

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Main from '@/views/Main.vue'; //
import Home from '@/views/Home.vue';
import Login from '@/views/Login.vue';
// import 404 from '@/views/404.vue';
import NotFound from "@/views/404.vue"; // 导入 404 页面组件// 定义路由配置
const routes: RouteRecordRaw[] = [{path: '/',name: 'main',component: Main,redirect: { name: 'login' }, // 默认重定向到 login 子路由children: [{path: 'home',name: 'home',component: Home,}],},{path: '/login',name: 'login',component: Login,},{path: '/main', // 如果确实需要 /main 路径redirect: { name: 'home' }, // 仅保留重定向规则},// 其他路由配置...{path: "/:pathMatch(.*)*", // 通配符路由name: "404",component: NotFound,},
];// 创建路由器
const router = createRouter({history: createWebHistory(),routes, // 使用已定义的路由配置
});export default router;