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

问题描述

我有一个身份验证组件，我在登录和注册路径中都使用了它.

const 路由 = [{小路     : '/'，name: '家',组件:首页}, {路径:'/登录'，name: '登录',组件:身份验证},{路径:'/注册'，name: '注册',组件:身份验证}];

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

解决方案

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

这样做将强制 Vue 创建组件的新实例.

编辑

更新以提供您可以添加的元键，这将允许您仅针对您需要的路由禁用组件的重用.如果您想在深度超过 1 级的路线上使用它，这将需要改进 - 但它为您提供了想法.

const Foo = {名称:'富'，数据 () {返回 {输入文本: ''，}},模板:`<div class="box"><h1>{{ $route.path }}</h1><input type="text" v-model="inputText">

`，}常量巴兹 = {name: 'baz',数据 () {返回 {输入文本: ''，}},模板:`<div class="box"><h1>{{ $route.path }}</h1><input type="text" v-model="inputText">

`，}const 路由 = [{ 路径:'/foo'，组件:Foo，元:{重用:假}，}，{ 路径:'/bar'，组件:Foo，元:{重用:假}，}，{ 路径: '/baz', 组件: Baz },{ 路径:'/bop'，组件:Baz }]const 路由器 = 新的 VueRouter({路线})const app = new Vue({路由器，数据: {关键:空，},}).$mount('#app')router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.reuse === false)) {app.key = to.path} 别的 {app.key = 空}下一个()})

#content {位置:相对；高度:200px；}.盒子 {位置:绝对；顶部:0；左:0；宽度:200px；高度:200px；背景:rgba(0,0,0, 0.2);文本对齐:居中；变换: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="应用程序"><h1>你好应用程序！</h1><p><router-link to="/foo">转到Foo</router-link><router-link to="/bar">转到栏</router-link><router-link to="/baz">转到 Baz</router-link><router-link to="/bop">转到 Bop</router-link></p><div id="内容"><router-view :key="key"></router-view>

<pre>{{key }}</pre>

这允许您将路由器视图与 Vues 转换系统结合起来，使其变得非常棒！

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>

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

EDIT

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>

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

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