Vue js rerender тот же компонент при смене маршрута

Question

У меня есть один компонент auth, который я использую как в логине, так и в маршруте регистрации.

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

Если, например, я на странице входа Проблема в том, если я что-то типа в текстовых входов и перейти к Signup текст все еще там, как я заставляю компонент переинициализировать?

Answer 1

Лучший способ сделать это на самом деле связать путь маршрутов к ключу маршрутизатора-View, в то

<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 caches rendered component. вы не указали код компонента 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, чтобы указать vue, чтобы повторно перенести некоторые элементы вместо их повторного использования.

например. у вас есть <input/> в вашем Auth компонентах, которые вы хотите изменить по различным маршрутам, добавьте key данные prop для Auth, используйте <input :key="key"/> в шаблоне. В вашем случае здесь

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

может быть хорошим выбором.