SoFunction
Updated on 2025-04-04

Problems of forward and backward routes in vue

Forward and Backward of Vue Route

this.$()  // Return to the previous levelthis.$(-1)  // It also returns to the previous level. 1 means forward -1 is back to the next level -2 is back to the next level.this.$("aa") // Routing forward  aaIt's a routecode

Browser refresh and fallback

(parameter)  // true is forced refresh is equivalent to Ctrl+F5 false refresh is equivalent to F5 = ""    // The address equivalent to the browser address bar, can also be used to jump page 
 
()  // Back(-1)  // Back 
 
(1)  // go ahead()  // go ahead 
 
(0)  // refresh()  // refresh

The principle of routing in vue

In hash mode

<body>
  <!-- router-link -->
  &lt;a href="#/" rel="external nofollow" >Home</a>  &lt;a href="#about" rel="external nofollow" >About</a>    &lt;!-- router-view --&gt;
    &lt;div &gt;&lt;/div&gt;
&lt;/body&gt;
&lt;script&gt;
  // How is the original routing code implemented  // In hash mode  // Listen to the browser's hashchange method, get the corresponding path, and render the corresponding components;  ('DOMContentLoaded',()=&gt;{
     = (1);
  })
  ('hashchange',() =&gt; {
    ('hashchange');
     = (1);
  })

In history mode

// In history mode// If you don't use the a tag, use the span element// pushState in h5function routerChange(pathname){
    (null,null,pathname)
     = ;
  }
  ('popstate',()=&gt;{
     = ;

  })

The difference between the two:

The #url will change through the anchor point, the browser can move forward and backward, the browser will keep refreshing, and not communicate with the server side (mainly through hash)

No anchor point and no hash, server-side cooperation is required

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.