项目正式搭建流程

1、配置路由
（1）普通路由的配置
在views文件夹下创建好了各种页面的视图之后，接下来在router/index.js文件中配置好路由，具体配置如下：
假设要配置ranklist的页面，首先要在router/index.js文件中导入这个模块
import RanklistIndexView from '../views/ranklist/RanklistIndexView'，
接下来在routes这个变量中，添加好配置

  {
    path: '/ranklist/',
    name: 'ranklist_index',
    component: RanklistIndexView,
  },

（2）路由重定向的配置：
在输入错误的网址之后，需要跳转到指定页面，这时需要路由重定向，假设要跳转到404的页面，可以参照下面的配置：
import NotFoundView from '../views/error/NotFoundView'

  {
    path: '/:catchAll(.*)',
    redirect: '/404/',
  },

（3）主页重定向
点击某标题，跳转到主页，可参照以下配置

  {
    path: '/',
    name: 'home',
    redirect: "/pk/",
  },

2、解决每点击一个页面就刷新的问题
在NavBar.vue中，将
<a class="navbar-brand" herf="/pk/">King Of Bots</a>
改成
<router-link class="navbar-brand" :to="{name: 'home'}">King Of Bots</router-link>
3、组件制作
在src/component目录下写好组件代码，以ContentField.vue组件为例子

<template>
    <!--  div.container>div.card>div.card-body  快捷创建；container是一个自适应大小的容器-->
    <div class="container">
        <div class="card">
            <div class="card-body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
}
</script>

<style scoped>
</style>

假设要在PkIndexView.vue中引入组件，PkIndexView.vue代码如下：

<template>
  <ContentField>
    对战
  </ContentField>
</template>

<script>
import ContentField from '../../components/ContentField.vue'

export default {
  component: {
    ContentField,
  }
}
</script>

<style scoped>
</style>

3、使得鼠标所点击的标签页面为高亮
<router-link class="nav-link active" :to="{name: 'record_index'}">对局列表</router-link>
上面是在class中添加active之后的代码，效果是使得“对局列表”高亮，要达到所点击的页面高亮效果，还需进行判断。可以在NavBar.vue文件中进行下面的改动。

<script>
import { useRoute } from 'vue-router'
import { computed } from 'vue'  //实时计算的函数

export default{
    setup() {
        const route = useRoute();//useRoute()返回的是当前路由信息
        let route_name = computed( ()=> route.name);//这一行怎么拆开来写呢
        return {
            route_name
        }
    }
}
</script>

相应的html代码应为：

<li class="nav-item">
    <router-link v-bind:class="route_name == 'pk_index' ? 'nav-link active' : 'nav-link'" :to="{name: 'pk_index'}">对战</router-link>
</li>        <!-- “v-bind:” 可简写成 “:” -->
<li class="nav-item">
    <router-link :class="route_name == 'record_index' ? 'nav-link active' : 'nav-link'" :to="{name: 'record_index'}">对局列表</router-link>
</li>
<li class="nav-item">
    <router-link :class="route_name == 'ranklist_index' ? 'nav-link active':'nav-link'" :to="{name: 'ranklist_index'}">排行榜</router-link>
</li>