声明式路由器 link 未使用 VueRouter 清除 Vue 组件中的模型

Question

开发任务调度程序路径“/task?id=10”使用带有任务信息的异步响应填充组件模型，工作正常。

在导航栏中我有以下路由器link：

<router-link to="/task">New Task</router-link>

所以我使用相同的路径和组件来创建新任务和编辑现有任务，所有这些都基于是否存在 "id" 参数。

问题是，如果我在路径 '/task?id=10' 中并填充了一些模型字段，然后我单击指向 '/task' 的路由器-link（无参数）它会更改浏览器 URL 但不会清除组件模型，因此输入数据会保留。

如何 restart/reload 通过声明性路由器登陆组件时 - link？

Answer 1

您可以制作 parent-child 组件。父组件在 /task 路由上，子组件在 '/task/10 上。更多，Nested Routes。此外，您不需要附加“?id=”，只需附加 /task/10。

const router = new VueRouter({
  routes: [
    { path: '/task', component: Task,
      children: [
        { path: ':id', component: TaskId }
      ]
    }]
 });

jsfiddle

声明式路由器 link 未使用 VueRouter 清除 Vue 组件中的模型

Declarative router link not clearing model in Vue component using VueRouter

vue.js

vue-router