Vue同一项目适配不同平台（PC端和移动端）

同一项目PC端和移动端适配有两种方案：

1. 路由适配

  路由适配就是在路由导航守卫中判断设备，然后根据设备进入不同的程序入口，但是这种方案有一个缺点，我在PC端输入移动端的地址会怎样？不能进入移动端的页面，所以还要根据设备针对另一平台做路由拦截。

  路由适配可以参考下面这篇博客：
  https://blog.csdn.net/qq_39985298/article/details/105444668

2. 组件适配

  组件适配就是在同一个路由中，根据设备使用不同的组件，我比较偏向这种方案，PC端和移动端针对同一页面，都是同一地址，方便开发和记忆，也不需要另外分开维护路由。

  组件适配可以参考：
  https://www.jianshu.com/p/21dfda02fc47

  我完善了一下，下面是router.js

		import Vue from 'vue'
		import VueRouter from 'vue-router'
		import Home from '../views/Home.vue'
		import M1 from '../views/mobile/M_1.vue'
		// import PC1 from '../views/pc/PC_1.vue'
		import PC2 from '../views/pc/PC_2.vue'
		
		Vue.use(VueRouter)
		
		// 如果是移动端，给 .vue 的命名特殊处理，这里多了一级目录 mobile/
		const path = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) ? 'mobile/' : 'pc/'
		
		const routes = [
		  {
		    path: '/',
		    name: 'Home',
		    component: Home
		  },
		  {
		    path: '/about',
		    name: 'About',
		    component: () => import('../views/About.vue')
		  },
		  {
		    path: '/m1',
		    name: 'M1',
		    component: M1
		  },
		  {
		    path: '/pc1',
		    name: 'PC1',
		    component: resolve => { require([`../views/${path}PC_1.vue`], resolve) }
		  },
		  {
		    path: '/pc2',
		    name: 'PC2',
		    component: PC2
		  }
		]
		
		const router = new VueRouter({
		  routes
		})
		
		export default router

但是在实际项目中，我暂时还没有将所有的路由都分别适配不同的组件，因为很多路由页面仅仅是界面不一样，调用的数据和方法都是同一个，也就是在Vue中只有“script”部分是一模一样的，这个暂时还没找到很好的解决方案，只是使用v-if属性在同一个vue组价中根据平台渲染不同的template元素