1.需求:要求项目支持pc端和h5端。支持不同角色登录看到的页面也完全不同
2.实现思路 : 根据功能创建路由实例。根据具体需求编写判断条件。
3.具体实现:
3.1 根据功能区分路由实例
3.2 每个功能都有独立的路由实例和路径
3.3 index.ts
import type { Router } from 'vue-router'
import H5CarServiceRouter from './modules/H5CarService'
import H5SynergyRouter from './modules/H5Synergy'
import MerchantRouter from './modules/Merchant'
import PCRouter from './modules/PC'
// const isMobile = window.matchMedia("(max-width: 768px)").matches
const isMobile = /DingTalk/gi.test(navigator.userAgent) //钉钉环境判定
let router: Router //声明一个路由
//移动端判定
if (isMobile) {
//业务需求 自定义判定条件
if (xxxxx) {
router = H5SynergyRouter
} else {
router = H5CarServiceRouter
}
}
//pc端判定
else {
//业务需求 自定义判定条件
if (xxx) {
router = MerchantRouter
} else {
router = PCRouter
}
}
export default router
3.4 功能内的index.js
/** 正常创建路由实例 */
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
history: createWebHashHistory(),
routes
})
//路由前置守卫
router.beforeEach((to, from, next) => {
//...todo
})
//路由后置守卫
router.afterEach(() => {
//...todo
})
export default router
3.5 main.ts
import router from './router/index'
const app = createApp(App)
registerApp(app, router)
app.mount('#app')