Vuejs Reload If in the Same Route

How can I refresh a route every time it is accessed in Vue Router 4?

To have multiple routes utilizing the same path, your best bet is using Named Views. You can define the default component for your index, or / path to be your Public component, while conditionally selecting a different component using v-if in your template.

You could define your routes as:

routes: [
  {
    components: {
      default: Public,
      Personal: Personal
    },
    name: "index",
    path: "/"
  }
]

Important to note that the syntax here differs. The component field here has to be pluralized in order for this to work, so it has to be components.

Then in your root template that's calling the views, you can then use a simple v-if to switch between them, depending on whether the user is logged in or not. How you store that information is up to you, so just adapt the below code to reflect your own app's logic

<!-- The default is Public, so you don't have to provide the name here -->
<router-view v-if="!user.loggedIn" />
<router-view v-else name="Personal" />

You can see this in this codesandbox

how to stay on same route in vuejs after page reload when running vuejs project in dev mode on some port?

Though, it shouldn't happen but I think the exact property in vue-router could help you, try:

<router-link to="/counter" exact>Counter</router-link>

Losing router data on page refresh in vue

Persisting api data in route params does not seem to me a good idea. You can use the router to store the id of data object, and then retrieve that object from a central store by id (Vuex for example).

Also, on refreshing the page you loose all the data stored in memory by Vue. Thus, if your goal is to reduce api calls on page refresh, you can hook a Vuex plugin (vuex-persistedstate for example) designed for that, or use the local storage to store data.

An important note, as I mentioned, on page refresh Vue loses all route info, and it parses the current location to restore that info. Thus, you have to persist that info in route path, by appending the params to it. After that, the data param will be available after refresh.

{
    path: "/productinfo/:data",
    name: "productinfo",
    component: () => import("../views/ProductInfo.vue"),
  },

Fetching data from parent-component after reload a route with vue and vue-router

If localStorage is suitable depends on the use case.

You say that data is lost when you reload the page/route. It's perfectly possible to store this data to prevent data-loss on route change/reload. But changing/reloading the page will only be solved either by storing data in localStorage (and retrieving from localStorage on page init), or storing it on the server and retrieving it on page init...

Vuex may help you with the route change/reload part, but even Vuex won't help you with the page change/reload.

I will show you an example of how to save the data for the first case: route changes and reloads, because this may be achieved without adding Vuex. We will do this by having the data inside a parent component and passing this data to our routes. When a route changes the data it should emit an update-event (including the updated data) and the parent should store the changed data.

I'll show an example scenario in which the parent holds all the data. The routes
are responsible for editing different aspects of the data. Each time i switch between a route the parent supplies the data.

A working example can be found here: https://jsfiddle.net/b2pyv356/

// parent component / app.vue
<template>

   <div>
        <router-view 
              :state="state" 
              @updatestate="updateState"
        ></router-view>
        
        <pre>Parent state: {{state}} </pre>
    </div>
    

</template>
<script>
export default {
    data() {
        return {
            state: {
                name: 'name',
                lastname: 'lastname'
            }
        }
    },
    methods: {
        updateState(state) {
            this.state = state;
        }
    }
};
</script>

// page1.vue
<template>

    <div>
        Route 1: State is: 
        <pre>{{state}}</pre>
        <div>
            Name: <input v-model="state.name">
            <button @click="$emit('updateState', state)">Save</button><br>
        </div>
        <router-link to="/page2">Next step</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

// page2.vue
<template>

    <div>
        Route 2: State is <pre>{{state}}</pre>
        Name: <input v-model="state.name">
        <button @click="$emit('updateState', state)">Save</button><br>
        <router-link to="/">Previous page</router-link>
    </div>

</template>
<script>
export default { props: ['state'] }
</script>

Persisting data:

• On updateState you could store the data in localStorage
• You could store some data in the request url ($router.params) or page query string. This has limits: some browsers enforce limits on how long a url may be. You are also responsible to validate/sanitize incoming data, do not trust that it won't be tempered with. Same applies to localStorage data btw. Common cases include storing a search query: if you refresh the page you still have the search query.
• Let the backend save the data and retrieve the user's data on page load.

---

Related Topics