Nuxt.js中PC与移动端间自动识别跳转
更新时间：2022年03月18日 11:05:40 作者：沐夕花开
本文主要介绍了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 = ...
}
}当然，这样跳转是可以了，但是问题也是一堆堆：
- 跳转时间比较长（在
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:写的过程中想到的)
到此这篇关于Nuxt.js中PC与移动端间自动识别跳转的文章就介绍到这了,更多相关Nuxt.js PC与移动端自动跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文详细介绍了通过js+plupload实现了绕过服务器，向又拍云批量上传图片的解决方法，十分的巧妙，也节省了服务器资源，这里推荐给有需要的小伙伴。2014-12-12
这篇文章主要介绍了JavaScript实现SHA-1加密算法的方法,实例分析了使用javascript实现SHA-1加密算法的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了javascript定时器完整实现方法,以实例形式分析了定时器的嵌套调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
原型方法的不同写法居然会影响调试的解决方法...2007-03-03
小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。下面小编给大家分享实现代码，需要的朋友参考下吧2018-05-05
本文详细介绍了JS模拟鼠标点击事件的原理以及应用场景,并提供了模拟鼠标左键点击事件、右键点击事件、滚轮事件和移动事件的代码实现,了解JS模拟鼠标点击事件的原理和实现方法对于开发人员非常重要,这对于许多面向用户的web应用程序的开发和测试都具有很重要的意义2023-09-09
这篇文章主要介绍了两个数组去重的JS代码，有需要的朋友可以参考一下2013-12-12
JavaScript 用cloneNode方法克隆节点的代码
很多时候我们需要通过HTML DOM 的方式，用JavaScript 动态生成很多相同的节点，包括其子节点2012-10-10
这篇文章主要介绍了JS原形与原型链,结合实例形式深入分析了JS原型链、继承、组合继承等相关原理、操作技巧及注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了利用原生JS实现欢乐水果机小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
最新评论