业务情景

前端页面需要写俩套,一套pc,一套移动端,两套页面通过不同的路径访问
我网上找了不少,看到了又俩篇博客的都写的不错
https://www.cnblogs.com/moqiutao/p/8522293.html
https://www.jianshu.com/p/eceb2ac9df90
都写的很详细,但是不适合我,应为我现在的情况是pc端的页面已经写完了,但是移动端还没有开始,并且项目已经导入并使用的vue-router进行路由管理,导致以上俩种方法都使用不了(除非我愿意大改代码)
找了半天没有找到合适的方法,然后自己突然想到了一个思路:本来的项目是app.vue为主页面,然后再这个页面上切换不同的路由,现在就多加一级,app.vue切换不同的路由,mobile和computer俩个分别代表移动端和pc,然后再在这俩个页面继续切换小页面就可以了

代码实现

创建项目:vue init webpack test
只添加了vue-router进行路由管理
vue单页面实现
创建项目失败的话可能是没有管理员权限的问题,找到命令行工具后右键管理员权限运行,在执行命令就可以了

创建俩个文件夹,分别存放pc和移动端的页面
vue单页面实现
继续写代码,先改app.vue,里面空的就好了,只做为路由中转用
vue单页面实现
然后新建四个文件
vue单页面实现
computer.vue代码,我这里只写了行文字来标识这个页面,正常项目的话,页头页脚这些通用的模块感觉可以写在这里面
vue单页面实现
mobile.vue里面的代码和computer里面的代码基本一致,index.vue里面也只写了一行话标识这个页面
vue单页面实现
然后修改index.js文件
vue单页面实现

将页面添加配置进去
vue单页面实现
运行测试结果
vue单页面实现
vue单页面实现
效果达成

相关文章:

  • 2021-04-25
  • 2021-09-13
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-06
  • 2021-05-10
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-09-03
  • 2021-07-16
  • 2021-11-22
  • 2021-09-05
相关资源
相似解决方案