Nuxt.js -- PC 与 移动端 间自动识别跳转

了解

官网类网站，须要考虑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 = ...
    }
}
复制代码

固然，这样跳转是能够了，可是问题也是一堆堆：

1. 跳转时间比较长（在mounted前数据已经请求了，页面也渲染了，因此时间比较长）
2. 有时会没做用（不了解什么缘由）

---

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

---

第三版：使用 middleware

对于middleware，官网的简介：

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

中间件执行流程顺序：

1. nuxt.config.js
2. 匹配布局
3. 匹配页面

很好，在 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:写的过程当中想到的)

end