Vue 在页面刷新时维护路由参数答案

【问题标题】：Vue maintain route params on page refershVue 在页面刷新时维护路由参数
【发布时间】：2020-06-04 12:29:25
【问题描述】：

我希望能够根据路由将元/道具列表传递给多个组件。为了实现这一点，我正在做以下事情。待办事项列表是硬编码的。这就是我想要的。它不是动态加载的。只有当我从列表中单击以转到项目时，我的解决方案才有效。但是，如果我尝试直接导航/刷新页面。我失去了meta 参数。

问题是如何在页面刷新时保持这一点？有没有更好的方法来管理这个？

代码沙盒：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
});

【问题讨论】：

需要查看您的路由器配置。我的第一个猜测是您没有将参数定义为路径的一部分
@Trevor 我已经更新了这个问题。我还添加了codesandbox.io链接
恐怕你不能在不动态处理的情况下获取刷新数据（例如使用像 Vuex 这样的状态管理库）。这样，当您在 singletodo 路由中时，您可以通过获取 id 参数从全局状态中检索 todo
@SylvainF 页面刷新也会擦除 vuex。它需要存储到更永久的存储空间。

标签： javascript vue.js vue-router router

【解决方案1】：

像这样更新你的路线

// 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 }
];

这会将元参数作为可选参数添加到 URL。去除那个？使其成为必需。你需要这个来允许页面刷新。

【讨论】：