fix(cli/site): 优化路由联动

affects: @varlet/cli
varletjs · Mar 25, 2021 · d7bbef3 · d7bbef3
1 parent 8aa8176
commit d7bbef3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/packages/varlet-cli/site/mobile/main.ts b/packages/varlet-cli/site/mobile/main.ts
@@ -3,7 +3,6 @@ import routes from '@mobile-routes'
 // @ts-ignore
 import config from '@config'
 import App from './App.vue'
-import AppType from './components/AppType.vue'
 import '@varlet/touch-emulator'
 import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
@@ -12,31 +11,32 @@ import { get } from 'lodash'
 const redirect = get(config, 'mobile.redirect')
 redirect &&
   routes.push({
-    path: '/:pathMatch(.*)*',
+    path: '/:pathMatch(.*)',
     redirect,
+    component: routes.find((c) => c.path === redirect).component,
   })
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
 
-router.beforeEach((to) => {
-  let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
-  if (!isPhone && window.self === window.top) {
-    window.location.href = `/#/${to.query.language}/${to.query.path}`
-  }
-})
+router.beforeEach((to, from) => {
+  const isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
 
-router.afterEach((to) => {
-  let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
   if (!isPhone) {
-    if (to.path === '/home' && to.query.path) {
-      window.top['router'].replace(`/${to.query.language}/${to.query.path}`)
-    } else {
-      window.top['router'].replace(`/${to.query.language}${to.path}`)
-    }
+    const pcPath =
+      to.path === '/home' && to.query.path
+        ? `/${to.query.language}/${to.query.path}`
+        : `/${to.query.language}${to.path}`
+
+    window.top['enableWatchURL'] = false
+    window.top['router'].replace(pcPath)
   }
+
+  // if (!isPhone && window.self === window.top) {
+  //   window.location.href = `/#/${to.query.language}/${to.query.path}`
+  // }
 })
 
 const app = createApp(App as any)

diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -37,7 +37,7 @@
           v-for="item in menu"
           class="varlet-site-nav__item"
           :class="{
-            'varlet-site-nav__item--active': item.doc === componentName,
+            'varlet-site-nav__item--active': item.doc === currentMenuName,
             'varlet-site-nav__link': !item.isTitle,
           }"
           v-ripple="{ touchmoveForbid: false, disabled: !!item.isTitle, color: '#2979ff' }"
@@ -79,6 +79,7 @@ import { useRoute } from 'vue-router'
 
 type Menu = {
   isTitle: boolean
+  nonComponent: boolean
   doc: string
   text: Record<string, string>
 }
@@ -104,6 +105,7 @@ export default defineComponent({
     const header: Ref<Header> = ref({ i18nButton: {}, logo: '', search: {} })
     const componentName: Ref<null | string> = ref(null)
     const title: Ref<string> = ref('')
+    const currentMenuName: Ref<string> = ref('')
     const versionList: Ref<string[]> = ref(['2.10.14', '1.x', '3.x'])
     const isHideVersion: Ref<boolean> = ref(true)
     let refs: HTMLElement = ref(null)
@@ -167,7 +169,15 @@ export default defineComponent({
     watch(
       () => route.path,
       (to: string) => {
-        componentName.value = to.slice(to.lastIndexOf('/') + 1)
+        currentMenuName.value = to.slice(to.lastIndexOf('/') + 1)
+
+        if (!window['enableWatchURL']) {
+          window['enableWatchURL'] = true
+          return
+        }
+
+        const currentNonComponent = menu.value.find((c) => c.doc === currentMenuName.value)?.nonComponent ?? false
+        componentName.value = currentNonComponent ? 'home' : currentMenuName.value
         language.value = to.slice(to.indexOf('#/') + 2, to.lastIndexOf('/'))
       },
       { immediate: true }
@@ -178,6 +188,7 @@ export default defineComponent({
       language,
       header,
       componentName,
+      currentMenuName,
       title,
       versionList,
       isHideVersion,
@@ -214,7 +225,7 @@ iframe {
   &-site {
     &-mobile {
       flex: 0 0 432px;
-      transform: scale(0.88);
+      transform: scale(0.88) translateZ(0);
       position: relative;
       height: 863px;
       align-self: center;
@@ -243,13 +254,13 @@ iframe {
 
     @media screen and (max-width: 1280px) {
       &-mobile {
-        transform: scale(0.66);
+        transform: scale(0.66) translateZ(0);
       }
     }
 
     @media screen and (min-width: 1281px) and (max-width: 1600px) {
       &-mobile {
-        transform: scale(0.7);
+        transform: scale(0.7) translateZ(0);
       }
     }
 

diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
@@ -19,6 +19,7 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes,
 })
+window['enableWatchURL'] = true
 window.top['router'] = router
 
 const app = createApp(App as any)