VueRouterを使用してVueコンポーネントの宣言型ルータリンクモデルをクリアしない

Question

タスクスケジューラを開発すると、 '/ task？id = 10'というパスでタスクモデルの情報が非同期応答で満たされます。私は、次のルータのリンクを持つナビゲーションバーで

：

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

「ID」パラメータが存在する場合にだから私は、すべてのベースの既存のものを新しいタスクを作成し、編集するための同じパスやコンポーネントを使用していますか否か。

私はpath/task？id = 10 'にいくつかのモデルフィールドを入力すると、'/task '（paramsなし）を指すルータリンクをクリックしてブラウザURLを変更するという問題があります入力データがそのまま残るようにコンポーネントモデルをクリアするわけではありません。

コンポーネントを宣言型ルータリンク経由で着陸させるとき、コンポーネントを再起動/再ロードするにはどうすればよいですか？

Answer 1

親子コンポーネントを作成できます。親コンポーネントは/タスクルートにあり、子は '/ task/10'になります。 More、Nested Routes。また、 '？id ='、just/task/10を追加する必要はありません。

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

jsfiddle