title: How to handle anchors (bookmarks) with Vue Router?
body: <p>I'm looking for a smart way to handle in-page anchors with Vue Router. Consider the following:</p>
  
  <pre><code>&lt;router-link to="#app"&gt;Apply Now&lt;/router-link&gt;
  &lt;!-- some HTML markup in between... --&gt;
  &lt;div id="app"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The "scroll to anchor" behavior <a href="https://router.vuejs.org/en/advanced/scroll-behavior.html" rel="noreferrer">described in the docs</a> works fine except:</p>
  
  <ul>
  <li>When you click on the anchor, it brings you down to the <code>div id="app"</code>. Now scroll away from the <code>div</code> back to the anchor and try clicking it again -- this time you will <strong>not</strong> jump down to the <code>div</code>. In fact, the anchor will retain the class <code>router-link-active</code> and the URL will still contain the hash <code>/#app</code>;</li>
  <li>With the steps above, if you refresh the page (the URL will still contain the hash) and click on the anchor, nothing will happen either.</li>
  </ul>
  
  <p>This is very unfortunate from the UX perspective because a potential customer has to manually scroll all the way down again to reach the application section.</p>
  
  <p>I was wondering if Vue Router covers this situation. For reference, here's my router:</p>
  
  <pre><code>export default new VueRouter({
      routes,
      mode: 'history',
      scrollBehavior(to, from, savedPosition) {
          if (to.hash) {
              return { selector: to.hash }
          } else if (savedPosition) {
              return savedPosition;
          } else {
              return { x: 0, y: 0 }
          }
      }
  })
  </code></pre>