CODEWITHSUNDEEP
javascriptvue.jsvue-routerrouter
Kristina Ferriera
Kristina Ferriera

Reputation: 21

Vue maintain route params on page refersh

I want to be able to pass list of meta/props to multiple components based on the route. To achieve this I am doing following. The todo list is hardcoded. Which is how I want. it is NOT dynamically loaded. my solution only works if I click from list to go to item. However if I try to navigate directly / refresh the page. I am losing the meta param.

Question is how can I maintain this on page refresh? Is there a better approach to managing this?

codesandbox: https://codesandbox.io/s/vue-router-3oblk

// todo.vue
<template>
  <div class="todos">
    <h1>Todos</h1>
    <stats :value="total" label="Total"></stats>
    <stats :value="completed" label="Completed"></stats>
    <stats :value="pending" label="Pending"></stats>
    <todo-list :todos="todos"></todo-list>
  </div>
</template>

<script>
import Stats from "../components/Stats";
import TodoList from "../components/TodoList";

export default {
  name: "Home",
  components: {
    "todo-list": TodoList,
    stats: Stats
  },
  data() {
    return {
      limit: 20,
      todos: [
        {
          userId: 1,
          id: 1,
          title: "delectus aut autem",
          completed: false
        },
        {
          userId: 1,
          id: 2,
          title: "quis ut nam facilis et officia qui",
          completed: false
        }
      ]
    };
  },
  computed: {
    total: function() {
      return this.todos.length;
    },
    completed: function() {
      return this.todos.filter(function(todo) {
        return todo.completed === true;
      }).length;
    },
    pending: function() {
      return this.todos.filter(function(todo) {
        return todo.completed === false;
      }).length;
    }
  }
};
</script>

// todo list
<template>
  <ul v-if="todos.length > 0">
    <li v-for="todo in todos" :key="todo.id">
      <router-link :to="{name: 'singletodo', params: {id: todo.id, meta: todo}}">
        <span :class="todo.completed ? 'completed' : ''">{{ todo.title }}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "TodoList",
  props: ["todos"]
};
</script>

<style scoped>
.completed {
  color: gray;
  text-decoration: line-through;
}

ul {
  margin-top: 2em;
  margin-left: 1em;
}

li {
  list-style: square;
}
</style>

// Router config
const routes = [
  { path: "/", name: "home", component: Home },
  { path: "/about", name: "about", component: About },
  { path: "/todos", name: "todo", component: Todos },
  { path: "/todos/:id", name: "singletodo", component: TodoSingle }
];

const router = new Router({
  routes
});

Upvotes: 2

Views: 132

Answers (1)

Trevor
Trevor

Reputation: 2922

Update your routes like this

// Router config
const routes = [
  { path: "/", name: "home", component: Home },
  { path: "/about", name: "about", component: About },
  { path: "/todos", name: "todo", component: Todos },
  { path: "/todos/:id/:meta?", name: "singletodo", component: TodoSingle }
];

This adds the meta parameter to the URL as optional. Remove the ? to make it required. You need this to allow page refreshes.

Upvotes: 1

Related Questions