vue项目同时兼容pc和移动端的解决方式
介绍:
公司要求vue开发的项目,既有移动端又有pc端,但是移动端和pc端展示的内容不一样,同一个组件样式也不一样,移动端展示内容比pc端少,那这个时候在一个项目种怎么做的?
解决方式:
路由写两份,一份移动端的,一份pc端的,这两份路由地址相同,对应的组件不同,在路由的入口文件里去判断渲染pc的路由还是移动端的路由
import Vue from 'vue'; import Router from 'vue-router'; import { routerM } from './routerM'; import { routerPC } from './routerPC'; Vue.use(Router); // 是否为手机端 const ISMOBILE = function () { let flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ); return flag; }; // 创建路由实例 const router = new Router({ mode: 'history', base: process.env.BASE_URL, fallback: false, // 这里判断后选择使用移动端的路由还是pc端的路由 routes: ISMOBILE() ? routerM : routerPC, }); export default router;
router下routerM.js和routrPC.js代码:
// routerPC.js import Layout from '@/layout' export const routerPC = [ { path: '/login', component: () => import('@/views/pc/login/index'), hidden: true }, ]
// routerM.js export const routerM = [ { path: '/login', component: () => import('@/views/mobile/login/index.vue'), hidden: true }, ]
可以看出是写了两份组件,导入组件时文件路径只有pc和mobile两个单词的区别。
拓展
同样的,当样式需要写两份的时候,也可以在main.js中按需引入
// 是否为手机端 const flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i ); // PC端和移动端的公共样式 import '@public/css/common.less'; // 移动端引入公共样式 if (flag) { require('@/assets/css/mobileCommon.less'); }
总结
到此这篇关于vue项目同时兼容pc和移动端的解决方式的文章就介绍到这了,更多相关vue同时兼容pc和移动端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
这篇文章主要介绍了vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-07图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
这篇文章主要介绍了Vue 使用iframe引用html页面实现vue和html页面方法的调用操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论