如何把vue组件结合起来，在一个页面中显示关键字，点开后是对应的页面，代码实现

可以使用 Vue Router 来实现在一个页面中显示关键字，点开后是对应的页面。

首先，在你的 Vue 项目中安装 Vue Router：

npm install vue-router

然后在项目的 main.js 文件中引入和使用 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = new VueRouter({
  routes
})

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

在上面的代码中，我们定义了三个路由，分别对应着三个组件：Home、About 和 Contact。现在我们可以在 App.vue 文件中使用这些组件：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

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

在上面的代码中，我们使用了 `<router-link>` 标签来创建链接，`to` 属性指定了要跳转到的路由。我们还使用了 `<router-view>` 标签来显示当前路由所对应的组件。

现在，当用户点击链接时，Vue Router 会自动切换到相应的路由，并显示对应的组件。