使用vue路由技术实现一个通过导航选项卡切换浏览新闻标题的页面。要求创建三个路由组件文件 New.vue,Hot.vue,Recommend.vue,，运行程序，页面中有“最新”、 “热门”和“推荐”了个新闻类别导航选项卡，当鼠标单击不同的选项卡时，页面下方会显示对应的新闻内容，页面展示结果如下图。

好的，我能够帮你解决这个问题。下面是解决方法：

首先，你需要在你的vue项目中创建三个路由组件文件New.vue, Hot.vue和Recommend.vue。

接着，你需要在你的vue项目中安装vue-router依赖。你可以使用以下命令：

npm install vue-router --save

或者

yarn add vue-router

然后，你需要在你的vue项目中创建一个router.js文件，该文件包含VueRouter的配置和路由定义。以下是一个示例：

import Vue from 'vue'
import VueRouter from 'vue-router'
import New from './components/New.vue'
import Hot from './components/Hot.vue'
import Recommend from './components/Recommend.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/new' },
  { path: '/new', component: New },
  { path: '/hot', component: Hot },
  { path: '/recommend', component: Recommend }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

在上面的代码中，我们首先导入Vue、VueRouter和New、Hot、Recommend三个路由组件文件。我们还使用Vue.use(VueRouter)来安装VueRouter插件。然后我们定义了一个路由数组，其中包含了三个路由对象，每个对象都有一个path属性和一个component属性，用于指定路由路径和对应的组件。

接下来，我们创建了一个新的VueRouter实例，并将其配置为history模式，然后将路由数组传递给它。

最后，我们导出了该VueRouter实例，以便在其他组件中使用。

现在，我们已经定义了路由和组件，我们需要在App.vue文件中使用它们。以下是一个示例：

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/new">最新</router-link></li>
        <li><router-link to="/hot">热门</router-link></li>
        <li><router-link to="/recommend">推荐</router-link></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

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

在上面的代码中，我们使用Vue Router的router-link组件来创建导航选项卡。每个选项卡都有一个to属性，用于指定路由路径。我们使用router-view组件来显示当前路由对应的组件内容。

现在我们已经完成了所有设置，可以运行程序并查看结果了。你应该可以在页面中看到一个具有“最新”、“热门”和“推荐”新闻类别的导航选项卡。当单击不同的选项卡时，页面下方会显示相应的新闻内容。

希望这个解决方案能够帮到你！