ルートを変更するときに同じコンポーネントを再登録する

Question

ログインとサインアップの両方のルートで使用する認証コンポーネントが1つあります。

const routes = [{ 
    path  : '/', 
    name: 'home', 
    component: Home 
}, { 
    path  : '/signin', 
    name: 'signin', 
    component: Auth 
}, 
    { 
    path  : '/signup', 
    name: 'signup', 
    component: Auth 
    }]; 

例えば、私は、ログインページで問題だ場合は、私は、テキスト入力中に何かを入力してサインアップに行けば、テキストは私が再初期化するコンポーネントを強制する方法、まだそこにあるのですか？

Answer 1

これを行うには良い方法は、ルータ・ビューのキーへのルート・パスをバインドするために実際にある、すなわち

<router-view :key="$route.path"></router-view> 

は、コンポーネントの新しいインスタンスを作成するために、Vueのを強制します。

あなただけあなたが必要とルートのコンポーネントの再利用を無効にできるようになるあなたは追加できメタキーを提供するために、更新

EDIT。これは1レベル以上のルートでそれを使用したいと思えば精錬が必要ですが、それはあなたにアイデアを与えます。

const Foo = { 
 
    name: 'foo', 
 
\t data() { 
 
    \t return { 
 
     \t inputText: '', 
 
     } 
 
    }, 
 
\t template: ` 
 
    \t <div class="box"> 
 
     \t <h1>{{ $route.path }}</h1> 
 
      <input type="text" v-model="inputText"> 
 
     </div> 
 
    `, 
 
} 
 

 
const Baz = { 
 
    name: 'baz', 
 
\t data() { 
 
    \t return { 
 
     \t inputText: '', 
 
     } 
 
    }, 
 
\t template: ` 
 
    \t <div class="box"> 
 
     \t <h1>{{ $route.path }}</h1> 
 
      <input type="text" v-model="inputText"> 
 
     </div> 
 
    `, 
 
} 
 

 
const routes = [ 
 
    { path: '/foo', component: Foo, meta: { reuse: false }, }, 
 
    { path: '/bar', component: Foo, meta: { reuse: false }, }, 
 
    { path: '/baz', component: Baz }, 
 
    { path: '/bop', component: Baz } 
 
] 
 

 
const router = new VueRouter({ 
 
    routes 
 
}) 
 

 
const app = new Vue({ 
 
    router, 
 
    data: { 
 
    key: null, 
 
    }, 
 
}).$mount('#app') 
 

 
router.beforeEach((to, from, next) => { 
 
    if (to.matched.some(record => record.meta.reuse === false)) { 
 
    app.key = to.path 
 
    } else { 
 
    app.key = null 
 
    } 
 
    next() 
 
})

#content { 
 
    position: relative; 
 
    height: 200px; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: rgba(0,0,0, 0.2); 
 
    text-align: center; 
 
    transform: translate3d(0, 0, 0); 
 
}

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router@2.0.3"></script> 
 

 
<div id="app"> 
 
    <h1>Hello App!</h1> 
 
    <p> 
 
    <router-link to="/foo">Go to Foo</router-link> 
 
    <router-link to="/bar">Go to Bar</router-link> 
 
    <router-link to="/baz">Go to Baz</router-link> 
 
    <router-link to="/bop">Go to Bop</router-link> 
 
    </p> 
 
    <div id="content"> 
 
     <router-view :key="key"></router-view> 
 
    </div> 
 
    <pre>{{ key }}</pre> 
 
</div>

この後、あなたはそれがすごいなるようVues遷移システムを使用して、ルータ・ビューを組み合わせることができます！可能な場合は

Answer 2

vuejsキャッシュレンダリングコンポーネント。あなたはAuthコンポーネントコードを提供していませんが、私は次のことが役立つと思います。

<template> 
    <input type="text" ID="username" v-model="usernameinput"> 
    <!-- other text boxes and inputs --> 
</template> 
export default { 
    name: 'Auth', 
    //component code ..... 
    data: function() { 
     return { 
      usernameinput: '', 
      //and other stuff 
     } 
    }, 
    watch: { 
     // call method if the route changes 
     '$route': 'reInitialize' 
    }, 
    methods: { 
     reInitialize: function() { 
      this.usernameinput = ''; 
      //and so on 
     } 
    }, 
    //remainig component code 
} 

も別のposibiltyがあり、あなたが動的コンポーネントを使用していることとkeep-aliveが真であることがあります。

Answer 3

key属性を使用して、一部の要素を再利用する代わりに再表示することができます。

さまざまなルートで再レンダリングするAuthコンポーネントに<input/>があります。keyデータプロップをAuthに追加するには、テンプレートに<input :key="key"/>を使用してください。ここのケースでは、

data() { 
    key: this.$route.path 
} 

が良い選択です。そう