Javascript Vue在refersh页上维护路由参数

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

元

参数

问题是我如何维护页面刷新？有没有更好的管理方法

代码沙盒：

---

像这样更新你的路线

// 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。是否删除？使之成为必需。您需要此选项以允许页面刷新。

需要查看路由器配置。我的第一个猜测是您没有将参数定义为path@Trevor我已经更新了这个问题。我还添加了codesandbox.io link我担心如果不动态处理数据（例如使用Vuex之类的状态管理库），就无法在刷新时获取数据。这样，当您处于singletodo路由时，您可以通过获取id从全局状态检索todoparam@SylvainF页面刷新也会擦除vuex。需要将其存储到更永久的存储中。

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

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