Question

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

在导航栏中，我有以下路由器链接：

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

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

问题是，如果我在路径'/ task？id = 10'并且我填写了一些模型字段，那么我点击指向'/ task'的路由器链接（没有参数）它改变了浏览器URL但是它不会清除组件模型，因此输入数据仍然存在。

如何通过声明性路由器链接重新启动/重新加载组件？

Answer 1

您可以制作父子组件。父组件在/任务路由上，子组件在＆＃39; / task / 10上。更多，Nested Routes。此外，您不需要附加＆＃39;？id =＆＃39;，只需/ task / 10。

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

jsfiddle

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

1 个答案: