Vue js在更改路线时重新渲染相同的组件 [英] Vue js rerender the same component when changing route

问题描述

我在登录和注册路线中都有一个auth组件。

I have one auth component that I am using both in the login and the signup route.

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

例如，我在登录页面上问题是如果我在文本中键入内容输入并转到注册文本仍然存在，我如何强制组件重新初始化？

If for example, I'm on the login page The problem is if I type something in the text inputs and go to the signup the text is still there, how I force the component to reinitialize?

推荐答案

更好的方法这实际上是将路径路径绑定到路由器视图的密钥，即

The better way to do this is actually to bind the routes path to the router-view's key, i.e.

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

这样做会强制Vue创建组件的新实例。

Doing so will force Vue to create a new instance of the component.

编辑

已更新，可提供您可以添加的元键，以便您禁用组件的重复使用仅适用于您需要的路线。如果你想在深度超过1级的路线上使用它，那么这需要精炼 - 但它会给你一个想法。

Updated to provide a meta key you could add which would allow you to disable the reuse of components only for the routes you require. this would need refining if you wanted to work with it on routes that are more than 1 level deep - but it gives you the idea.

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过渡系统结合使用，这样它就变得非常棒了！

This then allows you to combine your router-view with Vues transition system so it becomes pretty awesome!

这篇关于Vue js在更改路线时重新渲染相同的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！