Using promise to fix vue-router with transition issue.

Fix Vue issue vuejs/vue-router#1758
Add html scroll-behavior to smooth to let scroll smoothly. (IE Safari not support this)

Author: =

.idea/workspace.xml

@@ -6576,6 +6576,10 @@ table {
   src: url("/css/font/Futura_PT.otf") format("opentype");
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 a {
   color: #22292f;
   text-decoration: none;

public/css/app.css

@@ -81,13 +81,22 @@ export default new VueRouter({
     routes,
     linkActiveClass: 'is-active',
     linkExactActiveClass: 'is-exact-active',
-    scrollBehavior(to) {
-        if (to.hash) return {selector: to.hash}; // 如果有指定hash的話滾動到hash的位置
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) return savedPosition;
+
+        // Vue router transition issue while using anchor, need to use promise to async execute and delay after transition render finish.
+        if (to.hash) {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve({selector: to.hash});  // 如果有指定hash的話滾動到hash的位置
+                }, 600);
+            });
+        }
 
         return new Promise((resolve) => {
             setTimeout(() => {
-                resolve({ x: 0, y: 0 })
-            }, 500)
+                resolve({ x: 0, y: 0 }); // scroll to (0, 0)
+            }, 500);
         })
     }
 });

public/js/app.js

@@ -65,8 +65,12 @@
                     data-aos="zoom-in-up"
                 >
                     <ul class="flex lg:flex-row flex-col justify-center items-center py-4">
+
                         <li class="tw-thumbnail lg:w-1/3 w-full p-4">
-                            <a href="/" class="flex lg:flex-col justify-center relative sm:pt-0 pt-8">
+                            <router-link tag="a"
+                                         :to="{path: '/salon', hash: '#js-milano'}"
+                                         class="flex lg:flex-col justify-center relative sm:pt-0 pt-8"
+                            >
                                 <figure class="w-2/5 sm:w-1/2 md:w-1/3 lg:w-full">
                                     <img src="/store/MILANO.jpg" alt="MILANO">
                                 </figure>
@@ -82,11 +86,14 @@
 
                                     <p class="xl:text-sm text-xs relative sm:pl-8">サロン紹介 & ご予約</p>
                                 </div>
-                            </a>
+                            </router-link>
                         </li>
 
                         <li class="tw-thumbnail lg:w-1/3 w-full p-4">
-                            <a href="/" class="flex lg:flex-col justify-center relative sm:pt-0 pt-8">
+                            <router-link tag="a"
+                                         :to="{path: '/salon', hash: '#js-la-rochelle'}"
+                                         class="flex lg:flex-col justify-center relative sm:pt-0 pt-8"
+                            >
                                 <figure class="w-2/5 sm:w-1/2 md:w-1/3 lg:w-full">
                                     <img src="/store/La_Rochelle.jpg" alt="La Rochelle">
                                 </figure>
@@ -102,11 +109,14 @@
 
                                     <p class="xl:text-sm text-xs relative sm:pl-8">サロン紹介 & ご予約</p>
                                 </div>
-                            </a>
+                            </router-link>
                         </li>
 
                         <li class="tw-thumbnail lg:w-1/3 w-full p-4">
-                            <a href="/" class="flex lg:flex-col justify-center relative sm:pt-0 pt-8">
+                            <router-link tag="a"
+                                         :to="{path: '/salon', hash: '#js-lisbon'}"
+                                         class="flex lg:flex-col justify-center relative sm:pt-0 pt-8"
+                            >
                                 <figure class="w-2/5 sm:w-1/2 md:w-1/3 lg:w-full">
                                     <img src="/store/LISBON.jpg" alt="LISBON">
                                 </figure>
@@ -122,7 +132,7 @@
 
                                     <p class="xl:text-sm text-xs relative sm:pl-8">サロン紹介 & ご予約</p>
                                 </div>
-                            </a>
+                            </router-link>
                         </li>
                     </ul>
                 </li>

resources/js/routes.js

@@ -12,7 +12,7 @@
         </hero-bg>
 
         <!--    sec 01    -->
-        <section class="mb-24 relative">
+        <section class="mb-24 relative" id="js-milano">
             <div class="max-w-1000 mx-auto p-4">
                 <div class="flex flex-col md:flex-row">
                     <div
@@ -59,7 +59,7 @@
         </section>
 
         <!--    sec 02    -->
-        <section class="mb-24 relative">
+        <section class="mb-24 relative" id="js-la-rochelle">
             <div class="max-w-1000 mx-auto p-4">
                 <div class="flex flex-col md:flex-row">
                     <div class="lg:w-1/2 w-full bg-white p-16 pt-8 border border-gold mb-16 md:my-16 md:mx-8 relative">
@@ -105,7 +105,7 @@
         </section>
 
         <!--    sec 03    -->
-        <section class="mb-24 relative">
+        <section class="mb-24 relative" id="js-lisbon">
             <div class="max-w-1000 mx-auto p-4">
                 <div class="flex flex-col md:flex-row">
                     <div class="lg:w-1/2 w-full bg-white p-16 pt-8 border border-blue-lighter mb-16 md:my-16 md:mx-8 relative tw-flex-end">

resources/js/views/Home.vue

@@ -14,6 +14,10 @@
     src: url("/css/font/Futura_PT.otf") format("opentype");
 }
 
+html {
+    scroll-behavior: smooth;
+}
+
 a {
     @apply text-black no-underline;
 }