Vue实现页面切换

1.首先，需要安装vue-router插件，可以使用npm或yarn进行安装。

npm install vue-router

2.在Vue的入口文件中引入并使用vue-router插件

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'

Vue.use(VueRouter)

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

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

在上面的代码中，定义了两个路由，分别对应两个组件Home和About，App组件是Vue的根组件，渲染整个应用。

3.在模板中使用<router-link>标签来实现路由跳转：

<template>
  <div>
    <h1>My App</h1>
    <nav>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<router-link>标签会渲染成一个<a>标签，点击后会根据to属性跳转到相应的路由。

4.最后，在组件中添加相关的业务逻辑，例如在Home组件中显示一些内容：

<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to my app!</p>
  </div>
</template>

当用户访问/路径时，将会显示Home组件中的内容。访问/about路径时，将会显示About组件中的内容。