Do we have router reload in vue-router

Question

I see in this pull request    Add a router reload   Reload with current path and call data hook again    But when I try issuing the following command from a Vue component  this  router reload    I get this error   Uncaught TypeError  this  router reload is not a function  I searched in the docs  but could not found anything relevant  Does vue vue-router provider some functionality like this  The software versions I m interested in are   quot vue quot    quot  2 1 0 quot    quot vue-router quot    quot  2 0 3 quot    PS  I know location reload   is one of the alternatives  but I m looking for a native Vue option

User · Answer

this  router go this  router currentRoute    Vue-Router Docs  I checked vue-router repo on GitHub and it seems that there isn t reload   method any more  But in the same file  there is  currentRoute object  Source  vue-router src index js  Docs  docs get currentRoute      Route       return this history  amp  amp  this history current      Now you can use this  router go this  router currentRoute  for reload current route  Simple example  Version for this answer   quot vue quot    quot  2 1 0 quot    quot vue-router quot    quot  2 1 1 quot

User · Answer

vueObject  forceUpdate     why don t you use forceUpdate method

User · Answer

The simplest solution is to add a  key attribute to     lt router-view  key   route fullPath  gt  lt  router-view gt    This is because Vue Router does not notice any change if the same component is being addressed  With the key  any change to the path will trigger a reload of the component with the new data

User · Answer

lt router-link  to    products    click native   router go    class  sub-link  gt  lt  router-link gt     I have tried this for reloading current page

User · Answer

Resolve the route to a URL and navigate the window with Javascript     x000D   x000D          let r   this  router resolve   x000D          name  this  route name     put your route information in x000D          params  this  route params     put your route information in x000D          query  this  route query    put your route information in x000D            x000D        window location assign r href  x000D   x000D   x000D    This method replaces the URL and causes the page to do a full request  refresh  rather than relying on Vue router   router go does not work the same for me even though it is theoretically supposed to

User · Answer

For rerender you can use in parent component   lt template gt     lt div v-if  renderComponent  gt content lt  div gt   lt  template gt   lt script gt  export default      data           return           renderComponent  true                      methods          forceRerender                Remove my-component from the DOM         this renderComponent   false           this  nextTick      gt                 Add the component back in           this renderComponent   true                               lt  script gt

User · Answer

router js  routes        path         component  test    meta        reload  true            main js  import router from    router    new Vue     render  h   gt  h App     router    watch         route   to           if to currentRoute meta reload  true  window location reload              mount   app

User · Answer

this  router go   does exactly this  if no arguments are specified  the router navigates to current location  refreshing the page   note  current implementation of router and its history components don t mark the param as optional  but IMVHO it s either a bug or an omission on Evan You s part  since the spec explicitly allows it  I ve filed an issue report about it  If you re really concerned with current TS annotations  just use the equivalent this  router go 0   As to  why is it so   go internally passes its arguments to window history go  so its equal to windows history go   - which  in turn  reloads the page  as per MDN doc   note  since this executes a  soft  reload on regular desktop  non-portable  Firefox  a bunch of strange quirks may appear if you use it but in fact you require a true reload  using the window location reload true    https   developer mozilla org en-US docs Web API Location reload  mentioned by OP instead may help - it certainly did solve my problems on FF

User · Answer

Use router go 0  if you use Typescript  and it s asking arguments for the go method

User · Answer

Here s a solution if you just want to update certain components on a page  In template  lt Component1  key  quot forceReload quot    gt   lt Component2  key  quot forceReload quot    gt   In data data       return       forceReload  0        In methods     Methods         reload             this forceReload    1              Use a unique key and bind it to a data property for each one you want to update  I typically only need this for a single component  two at the most  If you need more  I suggest just refreshing the full page using the other answers  I learned this from Michael Thiessen s post  https   medium com hackernoon the-correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad

User · Answer

It s my reload  Because of some browser very weird  location reload can t reload   methods      reload  function          this isRouterAlive   false       setTimeout     gt            this isRouterAlive   true         0            lt router-view v-if  isRouterAlive   gt

User · Answer

function removeHash           history pushState     document title  window location pathname                                             window location search       App  router replace  name  my-route   hash    update    App  router replace  name  my-route   hash       params   a  100     setTimeout removeHash  0    Notes    And the   must have some value after it  The second route hash is a space  not empty string  setTimeout  not  nextTick to keep the url clean

[vue.js] Do we have router.reload in vue-router?

Examples related to vue.js

Examples related to vue-router

Examples related to vuejs2