利用Vue Router实现单页面应用(SPA)的代码示例

npm install -g @vue/cli
vue create my-spa
cd my-spa

vue add router

<template>
  <div>
    <h1>欢迎来到首页</h1>
    <p>这是一个使用 Vue Router 实现的单页面应用示例。</p>
  </div>
</template>

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

<template>
  <div>
    <h1>关于我们</h1>
    <p>我们是一支热爱开发的团队。</p>
  </div>
</template>

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

<template>
  <div>
    <h1>联系我们</h1>
    <p>可以通过电子邮件与我们联系。</p>
  </div>
</template>

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

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'

Vue.use(Router)

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

const router = new Router({
  mode: 'history', // 使用历史模式
  routes
})

export default router

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/contact">联系我们</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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

<style>
nav {
  padding: 10px;
}
nav a {
  margin: 10px;
  text-decoration: none;
  color: blue;
}
nav a.router-link-exact-active {
  font-weight: bold;
}
</style>

npm run serve