Nuxt.js同一个路由地址根据设备类型渲染不同的pages组建？

Question

默认情况下

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

我希望：

Nuxt.js 同一个路由地址根据设备类型使用不同的pages组建？

如：

访问地址 /a。

如果是PC端就使用pages/a.vue组建；

如果设备是移动端，就使用 pages/a_mobile.vue 组建。

Answer 1

可以写一个middleware判断user-agent
或者page内判断user-agent给不同的视图

Answer 2

这是本人使用Nuxt.js开发项目中根据平台跳转路由的middleware，你根据你的路由调整下代码即可。

export default function({isServer, route, redirect, req}) {
    let system = {
        windows:false,
        macOS:false,
        linux:false
    };
    let userAgent,isPC;
    if(isServer){
        userAgent = req.headers['user-agent'].toLowerCase();
    }else{
        userAgent = window.navigator.userAgent.toLowerCase();
    }
    system.windows = (/win/g).test(userAgent);
    system.macOS = (/macintosh/g).test(userAgent);
    system.linux = (/x11/g).test(userAgent) || ((/linux/g).test(userAgent) && !(/android/g).test(userAgent));
    isPC = system.windows || system.macOS || system.linux;
    if(isPC){
        if((/m[-]*[\w]*/g).test(route.name)){
            //redirect path from '/m/{PATH}' to '/{PATH}';
            redirect(route.fullPath.slice(2));
        }
    }else{
        if(!(/m[-]*[\w]*/g).test(route.name)){
            //redirect path from '/{PATH}' to '/m/{PATH}';
            redirect('/m'+route.fullPath);
        }
    }
}

Answer 3

不懂楼主的需求，如果不是chaos那样的话，楼主可以试试用路由参数校验，通过判断参数的正则，来决定跳同个路由下面的哪个组件

Answer 4

楼主你这个问题解决了吗，我现在也要做你这样的需求