fix: Scroll to anchor not working #213

packages/saber/package.json

@@ -29,6 +29,7 @@
     "cac": "^6.5.1",
     "chokidar": "^3.0.0",
     "css-loader": "^2.1.0",
+    "css.escape": "^1.5.1",
     "cssnano": "^4.1.8",
     "devalue": "^1.1.0",
     "fast-deep-equal": "^2.0.1",

packages/saber/vue-renderer/app/create-app.js

@@ -87,10 +87,10 @@ export default context => {
           delete transition[key]
         }
       })
-      const beforeEnter = listeners['before-enter']
-      listeners['before-enter'] = el => {
+      const afterEnter = listeners['after-enter']
+      listeners['after-enter'] = el => {
         this.$emit('trigger-scroll')
-        beforeEnter && beforeEnter(el)
+        afterEnter && afterEnter(el)
       }
       const children = [
         h(

packages/saber/vue-renderer/app/router.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from './vendor/vue-router'
 import RoutePrefetch from './vendor/vue-router-prefetch'
+import cssEscape from 'css.escape'
 import routes from '#cache/routes'
 
 Vue.use(Router)
@@ -66,23 +67,11 @@ export default () => {
           // coords will be used if no selector is provided,
           // or if the selector didn't match any element.
           if (to.hash) {
-            let hash = to.hash
-            // CSS.escape() is not supported with IE and Edge.
-            if (
-              typeof window.CSS !== 'undefined' &&
-              typeof window.CSS.escape !== 'undefined'
-            ) {
-              hash = '#' + window.CSS.escape(hash.substr(1))
-            }
-            try {
-              if (document.querySelector(hash)) {
-                // scroll to anchor by returning the selector
-                position = { selector: hash }
-              }
-            } catch (e) {
-              console.warn(
-                'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).'
-              )
+            const selector =  `#${cssEscape(to.hash.substr(1))}`
+
+            if (document.querySelector(selector)) {
+              // scroll to anchor by returning the selector
+              position = { selector }
             }
           }
           resolve(position)

yarn.lock

@@ -3748,6 +3748,11 @@ css-what@^2.1.2:
   resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"
   integrity sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"