Question

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

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

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

Answer 1

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

e.g。您的Auth组件中有key，您希望在不同路线下重新渲染，向Auth添加<input :key="key"/>数据道具，在模板中使用data() { key: this.$route.path } 。在你的情况下，

protocol MyEngine {
    func doWork() -> Bool
}

可能是一个不错的选择。

Answer 2

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
}

还有另一种可能性，可能是您正在使用动态组件而且keep-alive是真的。

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

2 个答案: