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与移动端自动跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
本文主要介绍在HTML5中使用iScroll实现下拉刷新，上拉加载更多数据的方法，主要就是写了两个自定义函数pullDownAction和pullUpAction，分别在下拉和上拉的事件中调用他们。
2016-05-05
javascript简单计算器可美化
javascript简单计算器可美化，需要的朋友可以测试下。参考下实现原理。
2011-10-10
BootStrap Table对前台页面表格的支持实例讲解
bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css，下面通过本文给大家详细介绍需要引入的文件，对bootstrap table 表格感兴趣的朋友一起看看吧
2016-12-12
JavaScript中原始值和引用值深入讲解
原始值代表原始数据类型的值,也叫基本数据类型,包括 Number、Stirng、Boolean、Null、Underfined,下面这篇文章主要给大家介绍了关于JavaScript中原始值和引用值深入讲解的相关资料,需要的朋友可以参考下
2022-10-10
JS高级拖动技术 setCapture，releaseCapture
setCapture 的意思就是设置一个对象的方法被触发的范围，或者作用域。
2011-07-07
javascript模块化简单解析
这篇文章主要针对javascript模块化为大家进行简单解析，如何写一个模块，在页面中加载模块的方法，感兴趣的小伙伴们可以参考一下
2016-04-04
使用JavaScript实现页面局部更新的方法总结
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
2023-12-12
JavaScript原型继承_动力节点Java学院整理
这篇文章主要为大家详细介绍了JavaScript原型继承的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Lombok实现方式JSR-269
Lombok的出现帮助开发人员在开发工程中消除了大部分冗余代码:繁琐的get、set方法甚至建造者模式，今天通过本文给大家分享Lombok实现方式JSR-269的相关知识，感兴趣的朋友一起看看吧
2021-06-06
在JavaScript中让this保持正确的指向的解决方案
这篇文章主要介绍了关于在 JavaScript 中如何让 this 保持正确的指向的解决方案,文中给大家介绍了三种解决方案,使用闭包,使用箭头函数和换绑 this这三种方法,文中有详细的代码示例供大家参考,需要的朋友可以参考下
2024-01-01