首先在App.vue中
<template ><div id="app" ><!-- <router-view />--><router-view v-if="showPage == 1" name="m" ></router-view><router-view v-if="showPage == 2" name="pc" ></router-view></div></template><script>
created中根据_isMobile判断是否手机端，然后路由router-view根据showPage显示，路由会根据name显示移动端和pc端
<script>export default {name: 'app',data () {return {showPage: '',}},created () {if (this._isMobile()) {this.showPage = 1} else {this.showPage = 2}console.log(this.showPage)},methods: {_isMobile () {const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)return flag},},}</script>
然后定义如下文件夹
接下来看路由如何配置
注意是compinents，不是compinent要加s，此处的default是默认显示的页面，如果pc和m都未定义
{path: '/home',components: {default: () => import('@/views/pc/index'),pc: () => import('@/views/pc/index'),m: () => import('@/views/move/index'),},},
