vue实现户籍系统路由实现

户籍系统路由实现（Vue.js）

户籍系统通常需要管理居民信息、户籍变动、统计查询等功能模块。以下基于Vue Router的实现方案：

路由模块设计

在src/router/index.js中定义核心路由结构：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { title: '系统首页' }
  },
  {
    path: '/resident',
    component: () => import('@/views/resident/Index.vue'),
    children: [
      {
        path: 'list',
        component: () => import('@/views/resident/List.vue'),
        meta: { title: '居民信息管理' }
      },
      {
        path: 'add',
        component: () => import('@/views/resident/Add.vue'),
        meta: { title: '新增居民' }
      }
    ]
  },
  {
    path: '/household',
    component: () => import('@/views/household/Index.vue'),
    children: [
      {
        path: 'transfer',
        component: () => import('@/views/household/Transfer.vue'),
        meta: { title: '户籍迁移' }
      },
      {
        path: 'split',
        component: () => import('@/views/household/Split.vue'),
        meta: { title: '分户处理' }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to) => {
  document.title = to.meta.title || '户籍管理系统'
})

export default router

动态路由实现

对于需要权限控制的系统，可结合后端返回的权限数据动态生成路由：

// 在登录后调用此方法
function generateDynamicRoutes(userPermissions) {
  const dynamicRoutes = []

  if (userPermissions.includes('audit')) {
    dynamicRoutes.push({
      path: '/audit',
      component: () => import('@/views/Audit.vue'),
      meta: { title: '变更审核', requiresAuth: true }
    })
  }

  dynamicRoutes.forEach(route => {
    router.addRoute(route)
  })
}

路由守卫配置

添加全局路由守卫进行权限校验：

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({ path: '/login', query: { redirect: to.fullPath } })
    } else {
      next()
    }
  } else {
    next()
  }
})

嵌套路由视图

主布局文件中需放置顶层路由视图：

<!-- App.vue -->
<template>
  <div id="app">
    <main-header />
    <div class="main-container">
      <router-view />
    </div>
  </div>
</template>

子模块中使用二级路由视图：

<!-- views/resident/Index.vue -->
<template>
  <div class="resident-wrapper">
    <side-menu />
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

路由传参方式

居民详情页可采用三种传参方式：

1. 路径参数

   
   // 路由定义
   { path: '/resident/detail/:id', component: ResidentDetail }

// 组件获取 const route = useRoute() const residentId = route.params.id

2. 查询参数
```javascript
// 导航跳转
router.push({ path: '/resident/detail', query: { id: 123 } })

// 组件获取
const residentId = route.query.id

1. 状态管理

   
   // 跳转前存储
   store.commit('setCurrentResident', residentData)

// 目标组件获取 const currentResident = computed(() => store.state.currentResident)