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

2020-08-11  本文已影响0人  前端新阳

当一个页面相对复杂时,响应式不一定是个好方案,这时候期望 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;
上一篇 下一篇

猜你喜欢

热点阅读