title: VueJS scroll to section from different route
body: <p>I am trying to scroll to an anchor on a page using Vue and Vue Router (with history mode). </p>
  
  <p>When on the index page, the scroll behaviour works as expected by jumping to the section.</p>
  
  <p>However, when I am another page, it loads the index page at the top and not where the anchor is pointing to. </p>
  
  <p>I’m sure it’s a very simple thing but can’t get my head round it!</p>
  
  <p>Any help is appreciated!</p>
  
  <p><strong>My router index:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default new Router({
    scrollBehavior: function(to, from, savedPosition) {
      if (to.hash) {
        return {selector: to.hash}
      } else {
        return {x: 0, y: 0}
      }
    },
  
    mode: 'history',
    routes: [ ... ]
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>My Navigation:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;router-link @click.native="closeNav" to="/#enter"&gt;Enter&lt;/router-link&gt;
  &lt;router-link @click.native="closeNav" to="/#prizes"&gt;Prizes&lt;/router-link&gt;
  &lt;router-link @click.native="closeNav" to="/#faqs"&gt;FAQ&lt;/router-link&gt;
  &lt;router-link @click.native="closeNav" to="/contactus"&gt;Contact&lt;/router-link&gt;</code></pre>
  </div>
  </div>
  </p>