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

2024-07-28 20:37:00

了解

官网类网站，需要考虑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与移动端自动跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Nuxt.js的路由跳转操作(页面跳转nuxt-link)

路由跳转代码如下: <ul> <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li> <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li> <li><nuxt-link :to="
Vue在 Nuxt.js 中重定向 404 页面的方法

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置. 要在页面之间使用路由,我们建议使用<nuxt-link> 标签. 正文对我来说,Nuxt 是我所用过最好用的软件代码之一.它可以让我高效率地打造网站应用,无论这些应用是 SPA,还是 SSR,又或者是静态站点,这同时也是 JAM Stack 上面所提到的趋势. 顺便提一点,我们这个网站Vuedose 也是使用 Nuxt 所建立静态站点. 但是,绝大多数自己领悟的很有意思的使用技巧并没有被记载沉淀下来,
Nuxt.js踩坑总结分享

构建问题 1. 如何在 head 里面引入js文件? 背景: 在<head>标签中,以inline的形式引入flexible.js文件.本项目主要为移动端项目,引入flexible.js 实现移动端适配问题. Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置: // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text
nuxt.js中间件实现拦截权限判断的方法

最近在把vue的项目改成基于nuxt.js是 ssr渲染,需要进行权限拦截判断,网上查了不少资料.最终看官方手册解决了,贴一下过程项目环境 "element-ui":"^2.3.4", "flyio":"^0.5.2", "js-cookie":"^2.2.0", "nuxt":"^1.4.0", 一:首先登录页面在登录页面script中引入
Nuxt.js开启SSR渲染的教程详解

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框
详解Nuxt.js中使用Element-UI填坑

Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack.nodejs后台服务配置等操作,方便的搭建一个支持SSR的VUE项目.Element-UI则是一个机遇Vue2.0+开发的一套UI框架,实现了常用的组件,可帮助开发者快速搭建一个如CMS系统.后台管理系统等基于Vue的系统. 由于Element-UI目前在SSR支持方面还是不够完善,且Nuxt.js在文档方面也有欠缺,所以在Nuxt.js中使用Element-UI也是一段坑路,需要去将查看Nuxt源码与Element
Nuxt.js实现校验访问浏览器类型的中间件

前言 Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. 这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的; 若是不是共享同一个页面的情况,就需要拦截跳转了; 当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备) 思路本质上还是校验 UA , 只是这次是从 req 拿到,而不是从客户端获取再做处理客户端的处理的姿势 window.navigator.userAgent 服务端的处理姿势其实基本和上面的思路一
Nuxt.js之自动路由原理的实现方法

Nuxt.js 是一个基于 Vue.js 的通用应用框架.集成了Vue 2.Vue-Router. Vuex.Vue-Meta,用于开发完整而强大的 Web 应用. 它的特性有服务端渲染.强大的路由功能,支持异步数据.HTML头部标签管理等. 今天主要介绍的就是Nuxt的特性之一,强大的路由功能.nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置. nuxt源码地址: https://github.com/nuxt/nuxt.js 建议打开源码跟着文章的步骤看,第一
nuxt.js 在middleware(中间件)中实现路由鉴权操作

路由鉴权: 就是判断这个路由当前浏览者是否需要权限访问. 一般我是通过判断cookie中存储的token来判断的. 在middleware文件夹下新建"auth.js"的文件在当前auth.js文件内判断cookie中是否包含token字段 import getCookie from '~/utils/getCookie' export default function ({route, req, res, redirect}) { let isClient = process.cl
Nuxt.js中PC与移动端间自动识别跳转

目录了解问题解决了解官网类网站,需要考虑seo,使用了 nuxt.js 的 ssr 开发.pc端和移动端分离了,相当于两个独立的项目,部署在同一个服务器上,绑定不同域名. 问题需要判断当前设备,在两个端之前相互跳转. 解决根据浏览器ua判断当前是否为移动设备: let isMobile = (ua) => { return !!ua.match(/AppleWebKit.*Mobile.*/) } 因为接触Nuxt.js时间不长,也算不上深入.按直觉来吧: 第一版:在 defaul
node.js中PC端微信小程序包解密的处理思路

目录小程序的源码在哪里 PC端小程序是怎么被加密的解密思路预处理加密后的头部部分加密后的尾部部分再漂亮点 commander chalk 源代码原来发布在掘金,搬过来好了. 微信小程序在PC端是加密存储的,如果直接打开是看不到什么有用的信息的,需要经过解密才可以看到包内具体的内容.本文使用nodejs实现解密算法,主要涉及到crypto, commander, chalk三个包的使用. 小程序的源码在哪里 PC端打开过的小程序会被缓存到本地微信文件的默认保存位置,可以通过微信PC端
JS中队列和双端队列实现及应用详解

队列队列双端队列数据结构应用用击鼓传花游戏模拟循环队列用双端对列检查一个词是否构成回文生成 1 到 n 的二进制数队列和双端队列队列遵循先进后出(FIFO, 也称为先来先服务) 原则的. 日常有很多这样场景: 排队购票.银行排队等. 由对列的特性,银行排队为例, 队列应该包含如下基本操作: 加入队列(取号) enqueue 从队列中移除(办理业务离开) dequeue 当前排队号码(呼叫下一个人) peek 当前队列长度(当前排队人数) size 判断队列是不是空 isEmpty
vuex状态持久化在vue和nuxt.js中的区别说明

目录 vuex状态持久化在vue和nuxt.js的区别 Vue 使用 Nuxt vue的vuex的数据持久化使用插件vuex-persistedstate对数据进行数据的持久化处理 plugins要是一个一维数组不然会解析错误 vuex状态持久化在vue和nuxt.js的区别 Vue 相信很多人对 vue 中的 vuex 状态持久化已经很熟悉了,使用 vuex-persistedstate 或者 vuex-persist 即可. 这里推荐使用前者,因为 vuex-persist 基于 ts ,
Nuxt.js实现一个SSR的前端博客的示例代码

为什么要用Nuxt.js 公司现有的项目只有落地页是通过前端本身server读取pug文件进行服务端渲染的,当然是为了首屏加载速度以及SEO.Nuxt.js 是一个基于Vue.js的通用应用框架,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置,只需要安装官方文档的要求进行开发,就可以很好的解决SSR的问题.我们以一个简单的博客为例,来实践一下Nuxt.js. 项目介绍当前基于Nuxt.js的简化版博客,包括注册.登录.文章列表页面.文章详情页.以及用户列表页等几个页面,用户信息使用
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现PC端和手机端的功能.此时,就存在一个问题.项目在部署的时候只会使用一个地址,不会针对手机和PC端代码分别进行部署.这个时候就需要我们通过去识别视口分辨率的大小,来自动去跳转对应的代码. 2. 实现方式: 目前网上有很多的方法用来实现PC端和手机端的代码跳转,但我只用了一种实现方式.其他的暂时还没有尝
vue中利用iscroll.js解决pc端滚动问题

项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直
nuxt.js服务端渲染中axios和proxy代理的配置操作

需要npm axios? 刚开始,我以为需要像普通的vue SPA开发那样,需要npm axios,这种方式的确可以生效.但在使用时并不方便.尤其是设置代理比较麻烦,而且在asyncData里与在普通methods里使用方式不一样. 后来在nuxt的github上发现了nuxt是默认集成了axios的,所以不需要npm axios,但是需要进行适当的配置. 以上是百度到的,发现老是报错,现在网上的教程完全是在扯淡,npm axios 是不需要安装了,但是 @nuxtjs/axios 要安装啊第

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

目录

了解

问题

解决

相关推荐

随机推荐