我在登录和注册路径中都使用了一个auth组件.
const routes = [{
path : '/',
name: 'home',
component: Home
}, {
path : '/signin',
name: 'signin',
component: Auth
},
{
path : '/signup',
name: 'signup',
component: Auth
}];
例如，如果我在登录页面上，问题是如果我在文本输入中键入一些内容，然后转到文本仍然存在的注册页面，我如何强制组件重新初始化？
更好的方法是将路由路径绑定到路由视图的密钥，即.
<router-view :key="$route.path"></router-view>
这样做将迫使Vue创建组件的新实例.
EDIT
更新后提供了一个可以添加的元密钥，允许您仅在需要的路由中禁用组件的重用.如果你想在深度超过1层的路由上使用它，这需要改进，但它给了你 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过渡系统结合起来，让它变得非常棒！