// 檢測設備類型
export function detectDevice() {
  // 方案1: 通過User-Agent檢測
  const userAgent = navigator.userAgent.toLowerCase();
  const isMobile = /mobile|android|iphone|ipad|phone/i.test(userAgent);
  
  // 方案2: 通過屏幕尺寸檢測（處理平板等特殊情況）
  const isSmallScreen = window.innerWidth < 768;
  
  return isMobile || isSmallScreen ? 'mobile' : 'pc';
}

// 監(jiān)聽屏幕變化
export function setupDeviceWatcher(callback) {
  const updateDevice = () => {
    const device = detectDevice();
    callback(device);
  };

  window.addEventListener('resize', updateDevice);
  updateDevice(); // 初始化檢測

  // 返回清理函數(shù)
  return () => window.removeEventListener('resize', updateDevice);
}

export const mobileRoutes = [
  {
    path: '/',
    name: 'MobileHome',
    component: () => import('@/views/mobile/Home.vue'),
    meta: { device: 'mobile' }
  },
  {
    path: '/product/:id',
    name: 'MobileProduct',
    component: () => import('@/views/mobile/Product.vue'),
    meta: { device: 'mobile' }
  },
  {
    path: '/cart',
    name: 'MobileCart',
    component: () => import('@/views/mobile/Cart.vue'),
    meta: { device: 'mobile', requiresAuth: true }
  },
  {
    path: '/login',
    name: 'MobileLogin',
    component: () => import('@/views/mobile/Login.vue'),
    meta: { device: 'mobile' }
  }
];

export const pcRoutes = [
  {
    path: '/',
    name: 'PcHome',
    component: () => import('@/views/pc/Home.vue'),
    meta: { device: 'pc' }
  },
  {
    path: '/product/:id',
    name: 'PcProduct',
    component: () => import('@/views/pc/Product.vue'),
    meta: { device: 'pc' }
  },
  {
    path: '/cart',
    name: 'PcCart',
    component: () => import('@/views/pc/Cart.vue'),
    meta: { device: 'pc', requiresAuth: true }
  },
  {
    path: '/login',
    name: 'PcLogin',
    component: () => import('@/views/pc/Login.vue'),
    meta: { device: 'pc' }
  }
];

import { createRouter, createWebHistory } from 'vue-router';
import { mobileRoutes } from './mobileRoutes';
import { pcRoutes } from './pcRoutes';
import { detectDevice } from '@/utils/device';

// 創(chuàng)建基礎路由（公共路由）
const commonRoutes = [
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes: commonRoutes // 初始只包含公共路由
});

// 初始化路由
export function initRouter() {
  const device = detectDevice();
  const routes = device === 'mobile' ? mobileRoutes : pcRoutes;
  
  // 清空現(xiàn)有路由（保留commonRoutes）
  router.matcher = createRouter({
    history: createWebHistory(),
    routes: commonRoutes
  }).matcher;
  
  // 添加設備專屬路由
  routes.forEach(route => {
    router.addRoute(route);
  });
  
  return device;
}

// 路由守衛(wèi)：防止設備與路由不匹配
router.beforeEach((to, from, next) => {
  const currentDevice = detectDevice();
  
  // 檢查目標路由是否存在且匹配當前設備
  const isRouteExists = router.getRoutes().some(
    route => route.name === to.name
  );
  
  if (!isRouteExists) {
    // 路由不存在，重定向到對應設備的首頁
    const homeRoute = currentDevice === 'mobile' 
      ? { name: 'MobileHome' } 
      : { name: 'PcHome' };
    next(homeRoute);
  } else {
    next();
  }
});

export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router, { initRouter } from './router';
import { setupDeviceWatcher } from './utils/device';

// 初始化路由
const currentDevice = initRouter();

const app = createApp(App);
app.use(router);
app.mount('#app');

// 監(jiān)聽設備變化，必要時刷新頁面
setupDeviceWatcher(newDevice => {
  if (newDevice !== currentDevice) {
    // 簡單方案：刷新頁面
    window.location.reload();
    
    // 高級方案：動態(tài)替換路由（需更復雜實現(xiàn)）
    // initRouter();
    // router.push({ name: newDevice === 'mobile' ? 'MobileHome' : 'PcHome' });
  }
});

<!-- views/mobile/Home.vue -->
<template>
  <div class="mobile-home">
    <!-- 移動端專屬布局 -->
    <header class="mobile-header">
      <h1>移動版首頁</h1>
      <button @click="goToCart">購物車 ({{ cartCount }})</button>
    </header>
    
    <main class="mobile-content">
      <ProductList :products="products" />
    </main>
    
    <footer class="mobile-footer">
      <nav>
        <a href="/" rel="external nofollow" >首頁</a>
        <a href="/category" rel="external nofollow" >分類</a>
        <a href="/cart" rel="external nofollow" >購物車</a>
        <a href="/profile" rel="external nofollow" >我的</a>
      </nav>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import ProductList from '@/components/mobile/ProductList.vue';

export default {
  components: {
    ProductList
  },
  setup() {
    const cartCount = ref(0);
    const products = ref([]);
    
    onMounted(() => {
      // 獲取商品列表和購物車數(shù)據(jù)
      fetchProducts();
      updateCartCount();
    });
    
    const goToCart = () => {
      router.push({ name: 'MobileCart' });
    };
    
    return {
      cartCount,
      products,
      goToCart
    };
  }
};
</script>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { mobileRoutes } from './mobileRoutes'
import { pcRoutes } from './pcRoutes'
import { detectDevice } from '@/utils/device'

const router = createRouter({
  history: createWebHistory(),
  routes: [] // 動態(tài)加載
})

export function initRouter() {
  const device = detectDevice()
  const routes = device === 'mobile' ? mobileRoutes : pcRoutes
  
  // 重置路由
  router.matcher = createRouter({
    history: createWebHistory()
  }).matcher
  
  routes.forEach(route => router.addRoute(route))
  return device
}

// main.js
import { initRouter } from './router'

// 初始化前完成路由設置
initRouter()

createApp(App).use(router).mount('#app')

// router/index.js
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/product/:id',
    component: () => import('@/views/Product.vue')
  }
]

// DeviceDetector.vue
<template>
  <component :is="currentComponent" />
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { detectDevice } from '@/utils/device'

export default defineComponent({
  props: {
    mobileComponent: { type: Object, required: true },
    pcComponent: { type: Object, required: true }
  },
  setup(props) {
    const currentComponent = ref(null)
    
    onMounted(() => {
      const device = detectDevice()
      currentComponent.value = device === 'mobile' 
        ? props.mobileComponent 
        : props.pcComponent
    })
    
    return { currentComponent }
  }
})
</script>

// views/Home.vue
<template>
  <DeviceDetector
    :mobileComponent="mobileHome"
    :pcComponent="pcHome"
  />
</template>

<script>
import DeviceDetector from '@/components/DeviceDetector.vue'
import MobileHome from '@/components/mobile/Home.vue'
import PcHome from '@/components/pc/Home.vue'

export default {
  components: {
    DeviceDetector
  },
  setup() {
    return {
      mobileHome: MobileHome,
      pcHome: PcHome
    }
  }
}
</script>