Nuxt.js PC与移动端自动跳转

时间:2022-05-28 沐夕花开人气:4

了解

官网类网站，需要考虑seo，使用了 nuxt.js 的 ssr 开发。pc端和移动端分离了，相当于两个独立的项目，部署在同一个服务器上，绑定不同域名。

问题

需要判断当前设备，在两个端之前相互跳转。

解决

根据浏览器ua判断当前是否为移动设备：

let isMobile = (ua) => {
    return !!ua.match(/AppleWebKit.*Mobile.*/)
}

因为接触Nuxt.js时间不长，也算不上深入。按直觉来吧：

第一版：在 default.vue里面 mounted 里面直接操作。

mounted(){
    if(process.browser){
        let ua = navigator.userAgent
        let isMobile = isMobile(ua)
        ...
        window.location.href = ...
    }
}

当然，这样跳转是可以了，但是问题也是一堆堆：

跳转时间比较长（在mounted前数据已经请求了，页面也渲染了，所以时间比较长）
有时会没作用（不了解什么原因）

第二版：把这个操作移到 default.vue 的 updated 里面操作，但貌似没什么作用。

第三版：使用 middleware

对于middleware，官网的简介：

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

很好，在 middleware 下新建 midd.js：

export default function ({ isServer, req, redirect, route }) {
  let pcOrigin = 'http://localhost:3003'
  let mobileOrigin = 'http://localhost:3004'
  let isMobile = (ua) => {
    return !!ua.match(/AppleWebKit.*Mobile.*/)
  }
  let userAgent = req ? req.headers['user-agent'] : navigator.userAgent || ''
  return isMobile(userAgent) ? '' : redirect(pcOrigin + route.fullPath)
  // 使用redirect 重定向到外链需要加上前缀:http / https
}

然后在 nuxt.config.js加上对应配置：

router: {
    middleware: 'midd'
},

这样的话在每个页面渲染前都会调用midd.js，如果不需要每个页面都判断的话可以在需要判断跳转的页面里面写，然后把nuxt.config.js里面的去掉。

测试了一下，效果还不错。响应速度很快。

还有一种想法没有尝试：把这个判断、跳转写成plugin，在 nuxt.config.js里面挂载。( ps:写的过程中想到的)

加载全部内容