vue实现户籍系统路由实现

路由基础配置

在Vue项目中安装vue-router依赖

npm install vue-router

创建路由配置文件src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HouseholdRegister from '../views/HouseholdRegister.vue'

const routes = [
  {
    path: '/register',
    name: 'HouseholdRegister',
    component: HouseholdRegister
  }
]

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

export default router

路由守卫实现

添加户籍系统的权限验证逻辑

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('authToken')
  if (to.name === 'HouseholdRegister' && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

动态路由配置

根据用户角色加载不同路由

const adminRoutes = [
  {
    path: '/admin/audit',
    component: () => import('../views/AdminAudit.vue')
  }
]

const userRoutes = [
  {
    path: '/user/info',
    component: () => import('../views/UserInfo.vue')
  }
]

function setupRoutes(userRole) {
  const baseRoutes = [...routes]
  if (userRole === 'admin') {
    baseRoutes.push(...adminRoutes)
  } else {
    baseRoutes.push(...userRoutes)
  }
  router.matcher = createRouter({ history: createWebHistory(), routes: baseRoutes }).matcher
}

嵌套路由实现

户籍详情页嵌套路由配置

{
  path: '/household/:id',
  component: HouseholdDetail,
  children: [
    {
      path: 'basic',
      component: HouseholdBasicInfo
    },
    {
      path: 'history',
      component: HouseholdHistory
    }
  ]
}

路由元信息

为路由添加权限元数据

{
  path: '/sensitive-data',
  component: SensitiveData,
  meta: {
    requiresAuth: true,
    permissionLevel: 3
  }
}

路由过渡效果

添加页面切换动画

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}