问答

Nuxt.js设置同一个路由地址根据设备类型渲染不同的pages页面?

作者:admin 2021-09-10 我要评论

默认情况下 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 我的目录是这样的: ├── pages │ ├── m │ │ ├── index.vue // 移动...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

默认情况下

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

我的目录是这样的:
├── pages
│ ├── m
│ │ ├── index.vue // 移动端 自动生成的路由为 www.xx.com/m
│ ├── index.vue // PC端 自动生成的路由为 www.xx.com
│ ├── bills.js
我希望:

Nuxt.js 同一个路由地址根据是否是移动设备显示m站还是pc站

如:

访问地址www.xx.com

如果是PC端就使用pages/index.vue组件;

如果设备是移动端,就使用pages/m/index.vue组件。

浏览器端的地址保持不变。

尝试了中间件没成功

###

如果你只有少量的页面, v-if 判断下就可以了,如果多并且都要单独写移动端和 PC 端那就考虑两个入口吧

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Nuxt.js设置同一个路由地址根据设备类

    Nuxt.js设置同一个路由地址根据设备类

  • create-react-app 是否可以移除不需要

    create-react-app 是否可以移除不需要

  • React-native+Hooks+Typescript+Dva开

    React-native+Hooks+Typescript+Dva开

  • build后本地开发报错$reouter重复定义

    build后本地开发报错$reouter重复定义

腾讯云代理商
海外云服务器