项目演示地址：https://hujiyi.github.io/acme-world-web/

路由规划与实现

本项目实现的是一个论坛网站，网站划分为三个部分:

前台用户界面：主要是论坛的主题；主题的详细内容及评论；
帐号管理界面：主要是注册、登录等功能；
后台管理界面：主要是主题的管理；评论内容的管理等功能；

创建对应的文件夹及文件

分别创建以下三个文件夹：

src/views/home：用于存放前台用户界面的文件；
src/views/account：存放用户帐号相关的文件；
src/views/dashboard：存放后台管理界面的文件；

分别在以上三个文件夹各添加一个 Index.vue 文件，用于该模块的页面布局。

删除原有的两个视图文件： src/views/About.vue 和 src/views/Home.vue;

创建和删除完毕后的项目 views 文件夹下的文件结构如下图所示：

└-- views
    |-- account
    |   └-- Index.vue
    |-- dashboard
    |   └-- Index.vue
    └-- home
        └-- Index.vue

编辑三个文件

打开 src/views/account/Index.vue，编辑其内容如以下代码：

<template>
    <div>账号管理</div>
</template>

<script>
export default {
    name: 'Account',

}
</script>

<style>
</style>

打开 src/views/dashboard/Index.vue，编辑其内容如以下代码：

<template>
    <div>后台管理</div>
</template>

<script>
export default {
    name: 'Dashboard',

}
</script>

<style>
</style>

打开 src/views/home/Index.vue，编辑其内容如以下代码：

<template>
    <div>网站首页</div>
</template>

<script>
export default {
    name: 'Home',

}
</script>

<style>
</style>

修改路由文件

打开文件：src/router/index.js，编辑其内容如以下代码：

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


Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/home/Index.vue'),
  },
  {
    path: '/account',
    name: 'Account',
    component: () => import('../views/account/Index.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/dashboard/Index.vue'),
  }
];

const router = new VueRouter({
  routes
});

export default router;

编辑 App.vue

打开文件： src/App.vue，编辑其内容如以下代码：

<template>
    <div id="app">
        <router-view />
    </div>
</template>

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

App.vue 里面的 <router-view /> 是路由的最顶层的出口，渲染最高级路由匹配到的组件。

运行测试

在控制台输入命令： yarn serve

PS D:\sources\vue_repos\acme-world-app> yarn serve
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 6415ms                                                                       下午9:33:19


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.3.52:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.