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>
标签:ContentField,vue,正式,..,流程,配置,页面,路由,搭建
From: https://www.cnblogs.com/twinkler/p/17932754.html