基于vue-cli vue-router搭建底部导航栏移动前端项目

<template>
 <div id="app">
 <router-view class="view"></router-view>
 <div class="nav">
  <router-link class="nav-item" to="/langren">狼人杀</router-link>
  <router-link class="nav-item" to="/sanguo">三国杀</router-link>
  <router-link class="nav-item" to="/yingxiong">英雄杀</router-link>
 </div>
 </div>
</template>
<script>
</script>
<style>
 #app{
 height: 100%;
 display: flex;
 flex-direction: column;
 flex: 1;
 }
 .nav{
 height: 80px;
 line-height: 80px;
 display: flex;
 text-align: center;
 }
 .nav-item{
 flex: 1;
 text-decoration: none;
 }
 .nav-item:link,.nav-item:visited{
 background-color: white;
 color: black;
 }
 .nav-item:hover,.nav-item:active{
 color: white;
 background-color: #C8C6C6;
 }
</style>

// The Vue build version to load with the `import` mand
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router';
import App from './App';
Vue.config.productionTip = false;
Vue.use(VueRouter);
/ eslint-disable no-new /
new Vue({
 el: '#app',
 router,
 template: '</App>',
 render: h => h(App)
});

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const router = new VueRouter({
 routes: [{
  path: '/langren',
  ponent: require('../ponents/vue/langren.vue')
 }, {
  path: '/sanguo',
  ponent: require('../ponents/vue/sanguo.vue')
 }, {
  path: '/yingxiong',
  ponent: require('../ponents/vue/yingxiong.vue')
 }, {
  path: '/',
  ponent: require('../ponents/content/content.vue')
 }]
});
export default router;

import langren from './ponents/vue/langren.vue';
import sanguo from './ponents/vue/sanguo.vue';
import yingxiong from './ponents/vue/yingxiong.vue';
const routers = [
 {
  path: '/langren',
  ponent: langren
 },
 {
  path: '/sanguo',
  ponent: sanguo
 },
 {
  path: '/yingxiong',
  ponent: yingxiong
 }
];
export default routers;

<template>
 <div class="content"><p>我是content！</p></div>
</template>
<script type="text/ecmascript-6">
 export default {};
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .content
  height:100%
  background:blue
  flex:1
  display:flex;
  justify-content:center
  align-items:center
</style>

// http://eslint./docs/user-guide/configuring
module.exports = {
 root: true,
 parser: 'babel-eslint',
 parserOptions: {
 sourceType: 'module'
 },
 env: {
 browser: true,
 },
 // https://github./feross/standard/blob/master/RULES.md#javascript-standard-style
 extends: 'standard',
 // required to lint .vue files
 plugins: [
 'html'
 ],
 // add your custom rules here
 'rules': {
 // allow paren-less arrow functions
 'arrow-parens': 0,
 // allow async-await
 'generator-star-spacing': 0,
 // allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
 'semi': ['error', 'always'],
 'indent': 0,
 'space-before-function-paren': 0,
 "no-tabs":"off"
 }
}