通过@vue/cli脚手架构建demo:

//main.js
// 脚手架入口文件
// 初始化Vue和路由等实例，以及加载需要的插件等等
import Vue from 'vue'
//导入最顶层的父组件app.vue
import App from './App.vue'
//引入 router.js文件
import router from './router'
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

//router.js
//路由配置文件，需要的组件都需要import
import Vue from 'vue'
//引入官方路由
import Router from 'vue-router'
//其他页面组件（除了主页）都需要引入
import Home from './views/Home.vue'
import HelloWorld from './components/HelloWorld.vue'
// 明确安装使用路由
Vue.use(Router)
//路由实例化，并配置路由
export default new Router({
    mode: "history",
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
        },
        {
            path: '/helloWorld',
            name: 'helloWorld',
            component: HelloWorld
        },
    ]
})

<!-- App.vue 主组件 -->
<template>
    <div id="app">
        <div id="nav">
            <!--  router-link 用来创建导航，to 选项为导航链接 -->
           <!--  router-link 还有其他一些属性，可以查看相关API -->
            <router-link to="/" tag="li" replace active-class="home"><a>Home</a></router-link>
            <router-link to="/about" tag="li" active-class="about"> <a>About</a></router-link>
            <router-link to="/helloWorld" tag="li" active-class="helloWorld"> <a>HelloWorld</a></router-link>
        </div>
        <!-- router-view组件用来渲染激活的路由内容 -->
        <router-view></router-view>
    </div>
</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;
}

li {
    list-style-type: none;
}
</style>

<!-- home.vue -->
<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js App" />
    </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
    name: 'home',
    components: {
        HelloWorld
    }
}
</script>

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<!-- About.vue -->
<template>
  <div class="about">
    <h1>这个是关于页面</h1>
  </div>
</template>

路由实例化之后，需要配置routes选项，配置路径和对应的组件等信息。配置选项：https://router.vuejs.org/zh/api/#routes