vue单页面实现

业务情景

前端页面需要写俩套，一套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进行路由管理

创建项目失败的话可能是没有管理员权限的问题，找到命令行工具后右键管理员权限运行，在执行命令就可以了

创建俩个文件夹，分别存放pc和移动端的页面

继续写代码，先改app.vue，里面空的就好了，只做为路由中转用

然后新建四个文件

computer.vue代码，我这里只写了行文字来标识这个页面，正常项目的话，页头页脚这些通用的模块感觉可以写在这里面

mobile.vue里面的代码和computer里面的代码基本一致，index.vue里面也只写了一行话标识这个页面

然后修改index.js文件

将页面添加配置进去

运行测试结果


效果达成

补充一个问题配置子路由是还是要填写全路径，如下
products的路径我之前只填写了/products没有填写全路径“/mobile/products”导致了访问不了