vue中的页面结构是由组件构成的，不同的组件可以表示不同的页面，适合进行单页面应用开发。编写程序实现登录组件和注册组件的切换。

Vue.js 是一个流行的JavaScript框架，它采用组件化的开发方式来构建用户界面。在Vue中，页面通常是由多个可复用的组件构成的。每个组件都可以有自己的模板、数据逻辑和样式，使得页面结构清晰且易于管理。

为了实现登录组件和注册组件的切换，通常我们会使用Vue的组件系统以及条件渲染的概念。具体方法可以通过数据绑定来控制显示哪个组件。下面是一个简单的示例代码，展示了如何使用Vue的`v-if`指令来根据条件切换显示登录组件或注册组件。

<div id="app">
  <button @click="showLogin = !showLogin">切换到{{ showLogin ? '注册' : '登录' }}</button>

  <div v-if="showLogin">
    <login-component></login-component>
  </div>
  <div v-else>
    <register-component></register-component>
  </div>
</div>

<script>
// 假设已经有了login-component和register-component这两个Vue组件
Vue.component('login-component', {
  template: '<div>登录表单</div>'
});
Vue.component('register-component', {
  template: '<div>注册表单</div>'
});

var app = new Vue({
  el: '#app',
  data: {
    showLogin: true // 控制显示哪个组件，默认显示登录组件
  }
});
</script>

在上面的代码中，我们使用了一个按钮来触发组件的切换，并通过`showLogin`这个布尔型数据来控制显示哪个组件。`v-if`是Vue中的条件渲染指令，用于条件性地渲染一块内容。当`showLogin`为`true`时，显示登录组件，否则显示注册组件。

为了确保这个示例能够正常工作，你需要确保`login-component`和`register-component`这两个组件已经被定义好了，它们应当包含了对应的模板内容。