供vue完整代码，实现四个组件路由切换，并设置第一个页面为默认打开页面

以下是一个简单的示例代码，使用 Vue Router 实现四个组件之间的路由切换，并将第一个页面设置为默认打开页面：

<!-- index.html -->
<div id="app">
  <router-view></router-view>
</div>

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
import Services from './components/Services.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
  { path: '/services', component: Services }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<!-- App.vue -->
<template>
  <div>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
        <li><router-link to="/services">Services</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>Learn more about us!</p>
  </div>
</template>

<!-- Contact.vue -->
<template>
  <div>
    <h1>Contact Page</h1>
    <p>Get in touch with us!</p>
  </div>
</template>

<!-- Services.vue -->
<template>
  <div>
    <h1>Services Page</h1>
    <p>See what we can do for you!</p>
  </div>
</template>

在这个示例中，我们定义了四个路由，分别对应四个组件。在 `App.vue` 模板中，我们使用 `router-link` 组件来创建导航链接，这些链接会触发路由切换并渲染相应的组件。

在 `main.js` 中，我们将 `VueRouter` 安装为 Vue 的插件，然后创建一个新的 `VueRouter` 实例，并将其传递给 `Vue` 实例。最后，我们将 `App` 组件渲染到页面上。

注意，我们在路由配置中将 `/` 路径映射到 `Home` 组件，因此它将作为默认打开的页面。