vue代码实现页面切换

Vue 通常使用 Vue Router 库来实现页面切换。以下是一个简单的示例：

1. 首先，安装 Vue Router：

npm install vue-router --save

2. 在 main.js 中引入并使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

3. 在 App.vue 中添加路由出口和导航链接：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  components: {
    Home,
    About
  }
}
</script>

4. 创建 Home.vue 和 About.vue 组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Home Page',
      content: 'Welcome to the home page!'
    }
  }
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'About Page',
      content: 'Learn more about us!'
    }
  }
}
</script>

现在，当路由改变时，Vue 将自动加载相应的组件并将其渲染到 `<router-view>` 中。您可以通过点击导航链接来触发路由切换。