vue主页面引入分页面

在 Vue 中，可以使用 `Vue Router` 来实现页面的路由跳转，可以将不同的页面组件定义在不同的 `.vue` 文件中，然后在主页面中引入和注册这些组件，然后通过路由跳转来实现页面之间的切换。

假设我们有两个分页面，分别为 `Home.vue` 和 `About.vue`，它们的代码如下：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

在主页面中，我们需要先引入 `Vue Router` 并注册路由，然后定义路由规则和对应的组件：

<template>
  <div>
    <h1>My App</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from './components/Home.vue'
  import About from './components/About.vue'

  Vue.use(VueRouter)

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

  const router = new VueRouter({
    routes
  })

  export default {
    router
  }
</script>

在这里，我们先引入了 `VueRouter` 和分页面组件 `Home` 和 `About`，然后注册了路由和路由规则，最后将路由对象暴露出去。在模板中，我们使用 `router-link` 组件来实现路由跳转，使用 `router-view` 组件来显示当前路由对应的组件。