开始

很自然地使用 Vue 和 vue-router 创建单页应用，当添加 vue-router 到混合器中时，我们已经使用组件组合我们的应用，我们需要做的就是将组件跟路由映射，让路由知道如何渲染他们，这里有一个简单的例子：

router-link

注意，我们使用自定义组件router-link来创建链接，而不是使用常规的a标记。这允许Vue路由器改变URL而无需重新加载页面，处理URL生成以及它的编码。稍后我们将看到如何从这些特性中获益。

router-view

router-view将显示对应于url的组件。你可以把它放在任何地方，以适应您的布局。

html

首先我们现在 src/views 创建两个页面：

Home.vue：

<template>
    <div class="home-wrap">
        home
    </div>
</template>
<script>
export default {
    name: 'Home',
    data: () => {
        return {
            
        }
    }
}
</script>

About.vue：

<template>
    <div class="about-wrap">
        about
    </div>
</template>
<script>
export default {
    name: 'About',
    data: () => {
        return {
            
        }
    }
}
</script>

在 src/router/index.js 添加对应的路由：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      title: '关于'
    }
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      title: '首页'
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

在 src/App.vue 添加 router-link，router-view：

<template>
  <router-link to="/home">Go to Home</router-link>
  <router-link to="/about">Go to About</router-link>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>