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>路由传参方式
居民详情页可采用三种传参方式：
- 路径参数
// 路由定义 { 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- 状态管理
// 跳转前存储 store.commit('setCurrentResident', residentData)
// 目标组件获取 const currentResident = computed(() => store.state.currentResident)
