Vue js在更改路线时重新渲染相同的组件

Question

我有一个auth组件,我在登录和注册路由中都使用它.

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创建组件的新实例.

编辑

更新为提供您可以添加的元键,允许您仅为所需的路由禁用组件的重用.如果你想在超过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过渡系统结合使用,这样它就变得非常棒了!

Answer 2

您可以使用key属性来指示vue重新呈现某些元素，而不是重新使用它们。

例如<input/>，您的Auth组件中有一个要在不同路径下重新渲染的，在模板中添加一个key数据道具，以Auth供使用<input :key="key"/>。就您而言

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

可能是一个不错的选择。