導入:
同社では、Vueで開発したプロジェクトにはモバイル端末とPC端末の両方が必要としているが、モバイル端末とPC端末では表示されるコンテンツが異なり、同じコンポーネントのスタイルも異なるため、モバイル端末に表示されるコンテンツはPC 端末ではそれよりも小さいです。プロジェクトはどのように機能しましたか?
解決:
モバイル端末用とPC端末用の2つのルートを記述します 2つのルーティングアドレスは同じですが、対応するコンポーネントが異なります ルートのエントリファイル内で、描画用のルートかどうかを判断します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;
ルーターの下の RouterM.js および routerPC.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
},
]
2 つのコンポーネントが記述されており、コンポーネントをインポートするときのファイル パスが PC とモバイルで異なるだけであることがわかります。
拡大
同様に、スタイルを 2 回記述する必要がある場合は、オンデマンドで 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');
}