网站如何在pc端和手机端切换显示两套不同的代码

App.vue

<template>
  <div class="box">
    <router-view v-if="showPage == 1" name="m"></router-view>
    <router-view v-else="showPage == 2" name="pc"></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    _isMobile() {
      let 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;
    },
  },

  created() {
    if (this._isMobile()) {
      this.showPage = 1;
    } else {
      this.showPage = 2;
    }
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #070f34;
}
</style>

router

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from './pages/index.vue'
import mindex from './pagesApp/mindex.vue'
Vue.use(VueRouter)
    /*如果在一个模块化工程中使用它，必须要通过
     Vue.use() 明确地安装路由功能：

配置路由的路径 path  配置了关联 并 没有生效*/
export default new VueRouter({
    mode: 'history',
    routes: [{
        path: '/',
        components: {
            default: index,
            pc: index,
            m: mindex
        }
    }]
})

  {
            path: '/demo',
            components: {
                default: demo,
                pc: pcdemo,
                m: demo
            },
        }

https://router.vuejs.org/zh/guide/essentials/named-views.html

参考链接https://blog.csdn.net/weixin_43946728/article/details/87255087