用Vue3.0写三个跳转页面

好的，以下是使用Vue3.0实现三个跳转页面的示例代码：

1. 创建一个Home组件，作为首页：

<template>
  <div>
    <h1>Welcome to Home!</h1>
    <router-link to="/about">About</router-link>
    <router-link to="/services">Services</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

2. 创建一个About组件：

<template>
  <div>
    <h1>About Us</h1>
    <p>We are a company that provides excellent services to our clients.</p>
    <router-link to="/">Home</router-link>
    <router-link to="/services">Services</router-link>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

3. 创建一个Services组件：

<template>
  <div>
    <h1>Our Services</h1>
    <ul>
      <li>Web Development</li>
      <li>Mobile App Development</li>
      <li>UI/UX Design</li>
    </ul>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Services'
}
</script>

4. 在App.vue中导入并使用vue-router：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Services from './components/Services.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/services', component: Services }
  ]
})

export default {
  name: 'App',
  router
}
</script>

5. 在main.js中启动Vue应用：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

以上就是使用Vue3.0实现三个跳转页面的示例代码，希望对你有所帮助！