nuxt判断是pc端还是移动端，分别跳转不同页面

原创已于 2022-03-14 17:57:12 修改 · 4.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #node.js

于 2022-02-25 14:06:48 首次发布

本文介绍如何使用Nuxt.js的中间件解决移动端和PC端页面切换时的闪烁问题，通过mobilePcChange.js文件实现自动判断并进行PC/移动间的无缝跳转，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

项目有移动端跟pc端两套代码，使用的是类似京东那种两套独立的代码，之前使用的是beforeRouteEnter这个路由勾子，获取navigator对象来判断，但是他有个比较大的弊端，访问pc页面跳到移动端的时候会闪烁(就是pc内容都加载渲染完了才去跳移动，体验不好)

改进：使用Nuxt.js中间件

在项目根目录下的middleware文件夹(没有就新建)，建立mobilePcChange.js文件，内容如下

具体路由根据自己项目去变化

// 遵守pc与移动的命名规范，移动端前面加 m.,就会自动拼接拦截路径,自动响应式匹配pc/移动
const mobilepath = [
    '/m.路由名1',
    '/m.路由名2',
    '/m.路由名3',
  ]
  const pcpath = [
    '/路由名1',
    '/路由名2',
    '/路由名3',
  ]
export default function ({ isServer, req, redirect, route }) {
  // 这两个只有不同项目不同端口才用得上
  //   let pcOrigin = 'http://sincelocal.aupup.com:9003'
  //   let mobileOrigin = 'http://sincelocal.aupup.com:9004'
  let isMobile = ua => {
    return !!ua.match(/AppleWebKit.*Mobile.*/)
  }
  let userAgent = req ? req.headers['user-agent'] : navigator.userAgent || ''
  if(!req) return
  // http不能直接写死，要取出来，可能是https
  const request=req?.headers?.referer?.split('://')[0]||'http';
  // console.log(request,'当前的请求头');
  // 如果是移动端，但是确访问了pc的路径
  if (isMobile(userAgent) && pcpath.includes(route.path.toLowerCase())) {
    console.log('重定向到移动端', req.headers.host, route.fullPath)
    return redirect(
      `${request}://${req.headers.host}` +
        `/m.${route.fullPath.substring(1, route.fullPath.length)}`
    )
  } else if (
    !isMobile(userAgent) &&
    mobilepath.includes(route.path.toLowerCase())
  ) {
    // 如果是pc进了移动
    // 重定向到pc端
    console.log('重定向到PC端', req.headers.host, route.fullPath)
    return redirect(
      `${request}://${req.headers.host}` +
        `/${route.fullPath.substring(3, route.fullPath.length)}`
    )
  }
  //   return isMobile(userAgent) ? '' : redirect(pcOrigin + route.fullPath)
  // 使用redirect 重定向到外链需要加上前缀:http / https
}

然后在nuxt.config.js导出的顶级配置路由配置处增加中间件

const config  ={
    router: {
    middleware: 'mobilePcChange'
    // middleware: 'router'
  }
}
module.exports = config

此番配置下来，只要你的pc跟移动是同一个项目下不同路由，就可以通过增加mobilepath和pcpath实现无闪顿响应式变化，当然如果pc跟移动是分开项目的就可以通过配置pcOrigin和mobileOrigin从而实现响应式切换页面,具体判断逻辑也是类似，可以自己改造一下