根据不同平台(PC、移动端)动态路由使用不同vue组件

当一个页面相对复杂时,响应式不一定是个好方案,这时候期望 PC 使用一个 .vue 文件,移动端使用另一个 .vue 文件,但路由使用同一个。
实现的方法有好几种,这里推荐在路由配置文件 router.js 实现。

// router.js
const ua = window.navigator.userAgent;
let isMobile = false;
if (ua.indexOf('iPhone') >= 0) isMobile = true;
if (ua.indexOf('Android') >= 0) isMobile = true;
if (ua.indexOf('iPad') >= 0) isMobile = true;

// 如果是移动端,给 .vue 的命名特殊处理,这里多了一级目录 mobile/
const path = isMobile ? 'mobile/' : '';

const routers = [
    {
        path: '/issues/:id',
        meta: {
            title: '问题'
        },
        // 这里用 path 来加载不同的 .vue 文件
        component: (resolve) => require([`./views/${path}issues.vue`], resolve)
    }
];

export default routers;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。