要使用 `vue-router` 来完成这个功能，你需要首先安装 `vue-router` 并在你的 Vue 项目中设置路由。以下是一个基本的实现步骤：
1. **安装 vue-router**
使用 npm 或 yarn 安装 vue-router：
```bash
npm install vue-router
# 或者
yarn add vue-router
```
2. **创建 Vue 组件**
为 "Home", "News" 和 "About" 页面创建三个 Vue 组件。例如：
`Home.vue`:
```vue
```
`News.vue` 和 `About.vue` 也以类似的方式创建。
3. **配置路由**
在你的主 Vue 文件（通常是 `main.js` 或 `main.ts`）中，导入并配置路由：
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import News from './components/News.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/news', component: News },
{ path: '/about', component: About },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
4. **在 App 组件中使用 `Home Page
```
5. **运行项目**
现在，当你点击 "Home", "News" 或 "About" 链接时，下方会显示相应的页面内容。
