Vue3+ts 实现移动端和pc端的多端路由——根据不同角色搭配不同路由

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')