Vue同一项目适配不同平台(PC端和移动端)
同一项目适配不同平台,包括PC端和移动端PC端项目做完之后,就要开发移动端了,由于项目较复杂,且PC和移动端仅有界面不一样,数据和要实现的功能都是一样的,所以需要在同一个项目中做适配。同一项目PC端和移动端适配有两种方案:路由适配 路由适配就是在路由导航守卫中判断设备,然后根据设备进入不同的程序入口,但是这种方案有一个缺点,我在PC端输入移动端的地址会怎样?不能进入移动端的页面,所以还要根据设备
·
Vue同一项目适配不同平台,包括PC端和移动端
PC端项目做完之后,就要开发移动端了,由于项目较复杂,且PC和移动端仅有界面不一样,数据和要实现的功能都是一样的,所以需要在同一个项目中做适配。
同一项目PC端和移动端适配有两种方案:
- 路由适配
路由适配就是在路由导航守卫中判断设备,然后根据设备进入不同的程序入口,但是这种方案有一个缺点,我在PC端输入移动端的地址会怎样?不能进入移动端的页面,所以还要根据设备针对另一平台做路由拦截。
路由适配可以参考下面这篇博客:
https://blog.csdn.net/qq_39985298/article/details/105444668
- 组件适配
组件适配就是在同一个路由中,根据设备使用不同的组件,我比较偏向这种方案,PC端和移动端针对同一页面,都是同一地址,方便开发和记忆,也不需要另外分开维护路由。
组件适配可以参考:
https://www.jianshu.com/p/21dfda02fc47
我完善了一下,下面是router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import M1 from '../views/mobile/M_1.vue'
// import PC1 from '../views/pc/PC_1.vue'
import PC2 from '../views/pc/PC_2.vue'
Vue.use(VueRouter)
// 如果是移动端,给 .vue 的命名特殊处理,这里多了一级目录 mobile/
const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
},
{
path: '/m1',
name: 'M1',
component: M1
},
{
path: '/pc1',
name: 'PC1',
component: resolve => { require([`../views/${path}PC_1.vue`], resolve) }
},
{
path: '/pc2',
name: 'PC2',
component: PC2
}
]
const router = new VueRouter({
routes
})
export default router
但是在实际项目中,我暂时还没有将所有的路由都分别适配不同的组件,因为很多路由页面仅仅是界面不一样,调用的数据和方法都是同一个,也就是在Vue中只有“script”部分是一模一样的,这个暂时还没找到很好的解决方案,只是使用v-if属性在同一个vue组价中根据平台渲染不同的template元素
更多推荐
已为社区贡献1条内容
所有评论(0)