在Vue.js中，使用`vue-router`来创建单页面应用（SPA）并实现页面之间的导航和内容的显示是非常常见的。以下是一个简单的示例，展示了如何使用`vue-router`来实现你所描述的功能。
首先，你需要安装`vue-router`。如果你还没有安装，可以通过npm或yarn来安装：
```bash
npm install vue-router
# 或者
yarn add vue-router
```
接下来，创建你的路由组件。假设你已经有`Home.vue`、`News.vue`和`About.vue`三个文件。每个文件中应该有类似以下内容的代码（这只是一个示例，你需要根据你的需求来编写具体内容）：
**Home.vue**
```vue
```
**News.vue** 和 **About.vue** 类似，只是内容不同。
然后，你需要创建一个路由配置文件（例如`router.js`或`index.js`在你的`router`文件夹中），并定义你的路由：
**router/index.js**
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import About from '../views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/news',
name: 'news',
component: News
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
现在，在你的Vue应用的根实例或主要组件（如`App.vue`）中，你需要包含一个`Home Page
```
最后，在你的Vue应用的入口文件（如`main.js`）中，你需要引入你的路由配置并将其传递给Vue实例：
**main.js**
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入你的路由配置
new Vue({
router, // 传递路由配置
render: h => h(App),
}).$mount('#app')
```
现在，当你点击导航链接时，`
