基于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` command// (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',  component: require('../components/vue/langren.vue') }, {  path: '/sanguo',  component: require('../components/vue/sanguo.vue') }, {  path: '/yingxiong',  component: require('../components/vue/yingxiong.vue') }, {  path: '/',  component: require('../components/content/content.vue') }]});export default router;

import langren from './components/vue/langren.vue';import sanguo from './components/vue/sanguo.vue';import yingxiong from './components/vue/yingxiong.vue';const routers = [ {  path: '/langren',  component: langren }, {  path: '/sanguo',  component: sanguo }, {  path: '/yingxiong',  component: 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.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/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" }}