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

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

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

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

6
javascript vue-router vue.js

3 ответов

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

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

Это заставит Vue создать новый экземпляр компонента.

редактировать

обновлено, чтобы предоставить мета-ключ, который вы можете добавить, что позволит Вам отключить повторное использование компонентов только для требуемых маршрутов. это потребует уточнения, если вы хотите работать с ним на маршрутах глубиной более 1 уровня - но это дает ты идея.

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

const Baz = {
  name: 'baz',
	data () {
    	return {
        	inputText: '',
        }
    },
	template: `
    	<div class="box">
        	<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, так что это становится довольно удивительным!

28

можно использовать ключ указать вю повторно некоторые элементы, вместо того чтобы использовать их.

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

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

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

4

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 - это правда.

0