项目正式搭建流程-526互联

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>