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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

沐夕花开   2022-05-28 我要评论

了解

官网类网站,需要考虑seo,使用了 nuxt.jsssr 开发。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.vueupdated 里面操作,但貌似没什么作用。

第三版:使用 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:写的过程中想到的)

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们