我们知道在Vue中，页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面（SPA）开发。
接下来，我们演示登录和注册组件的切换
既然Vue是由组件组成的，那很自然的，我们容易想到，如果我们需要切换各个组件呢？
v-if
通过v-if去渲染组件
示例代码如下
<!DOCTYPE html>
<html lang='zh_cn'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width' , initial-scale='1.0'>
<title>Vue 组件切换</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
</head>
<body>
<div id='app'>
<a href="#" @click.prevent="flag ? flag : flag = !flag">登陆</a>
<a href="#" @click.preven="flag ? flag = !flag: flag ">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<template id="login">
<div>
<p>{{loginTitle}}</p>
</div>
</template>
<template id="register">
<div>
<p>{{registerTitle}}</p>
</div>
</template>
<script>
Vue.component('login', {
template: '#login',
data() {
return {
loginTitle: '登陆组件',
}
}
})
Vue.component('register', {
template: '#register',
data() {
return {
registerTitle: '注册组件'
}
}
})
var vm = new Vue({
el: '#app',
data: {
flag: false,
},
methods: {
},
})
</script>
</body>
</html>
- 页面中注册了两个组件，一个是
login还有一个是register，两者都有对应data显示 APP根组件中通过flag控制默认显示的组件和组件的切换
演示效果
当然也可以使用v-show进行组件的切换，对于频繁切换组件的位置推荐使用，因为v-show仅对display的样式进行修改，不涉及到真正的DOM结点的更改
示例代码如下
<login v-show="flag"></login>
<register v-show="!flag"></register>
但是我们发现v-if和v-show控制组件，都需要将所需要的组件写出来，这就可能对扩展性不好（因为当我需要添加新的页面的时候，我需要添加很多代码却达到目的）
那有没有其他的方法能支持更多的组件进行切换呢？
答案是有，使用component进行组件切换
component
只需改变对应的app的div下的内容即可
<div id='app'>
<a href="#" @click.prevent="whichComponent = 'login'">登陆</a>
<a href="#" @click.prevent="whichComponent = 'register'">注册</a>
<component :is="whichComponent">
</div>
实验结果，与上述一致