install dependencies
cnpm i @vueuse/core
/utils/flexible.js
import { PC_DEVICE_WIDTH } from '../constants'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
// 判断当前设备是否为移动设备,判断依据屏幕宽度是否小于一个指定宽度(900)
export const isMobileTerminal = computed(() => {
// console.log(width.value, document.body.clientWidth)
return width.value < 900
})
Mobile route example:
/router/modules/mobile-routes.js
import mHome from '@/pages/mHome.vue'
import mHomePage from '@/pages/mHomePage/index.vue'
export const mobileRoutes = [
{
path: '/',
component: mHome,
redirect: '/HomePage ',
children: [
{
path: '/HomePage',
name: 'HomePage',
component: mHomePage
}
]
},
]
Example of PC-side routing:
/router/modules/pc-router.js
import Home from '@/views/Home.vue'
import HomePage from '@/views/homePage/index.vue'
export const mobileRoutes = [
{
path: '/',
component: Home ,
redirect: '/homePage',
children: [
{
path: '/HomePage',
name: 'HomePage',
component: HomePage
}
]
},
]
Import routes and configuration files
/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { isMobileTerminal } from '@/utils/flexible.js'
import { mobileRoutes } from '@/router/modules/mobile-routes.js'
import { pcRouter } from '@/router/modules/pc-router.js'
const routes = isMobileTerminal.value ? mobileRoutes : pcRouter
const router = createRouter({
history: createWebHistory(),
routes
})
export default router