Use vue-router to build the bottom navigation bar in vue-cli (detailed tutorial)-JS Tutorial-php.cn

Use vue-router to build the bottom navigation bar in vue-cli (detailed tutorial)

亚连

Release： 2018-06-02 17:38:20

Original

4384 people have browsed it

This article mainly introduces the bottom navigation bar mobile front-end project based on vue-cli vue-router. The project mainly uses Flex layout and viewport related knowledge, and has achieved the purpose of adapting to each terminal screen. Friends who need it can refer to

vue.js. The first step to learn to step into the trap

1. First install the vue-cli scaffolding

No need to go into details , mainly refer to the Vue road to climb the pit (1) - using vue-cli to build the project

2. Project presentation effect

Project presentation URL: www.zhoupeng520.cn/index.html

The project mainly uses Flex layout and viewport related knowledge, which has achieved the purpose of adapting to each terminal screen

3. The main directory of the project

4 The main code is as follows

(1) App.vue

<template>
 <p id="app">
 <router-view class="view"></router-view>
 <p 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>
 </p>
 </p>
</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>

Copy after login

(2)main.js

// 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 &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
import router from &#39;./router&#39;;
import App from &#39;./App&#39;;
Vue.config.productionTip = false;
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
 el: &#39;#app&#39;,
 router,
 template: &#39;</App>&#39;,
 render: h => h(App)
});

Copy after login

(3)index.js //This is the routing configuration

This can be written directly into main.js or like me in main. js, each has its own benefits

import Vue from &#39;vue&#39;;
import VueRouter from &#39;vue-router&#39;;
Vue.use(VueRouter);

const router = new VueRouter({
 routes: [{
  path: &#39;/langren&#39;,
  component: require(&#39;../components/vue/langren.vue&#39;)
 }, {
  path: &#39;/sanguo&#39;,
  component: require(&#39;../components/vue/sanguo.vue&#39;)
 }, {
  path: &#39;/yingxiong&#39;,
  component: require(&#39;../components/vue/yingxiong.vue&#39;)
 }, {
  path: &#39;/&#39;,
  component: require(&#39;../components/content/content.vue&#39;)
 }]
});
export default router;

Copy after login

You can also directly write a routers.js and place it in the src directory

(4)router.js

import langren from &#39;./components/vue/langren.vue&#39;;
import sanguo from &#39;./components/vue/sanguo.vue&#39;;
import yingxiong from &#39;./components/vue/yingxiong.vue&#39;;
const routers = [
 {
  path: &#39;/langren&#39;,
  component: langren
 },
 {
  path: &#39;/sanguo&#39;,
  component: sanguo
 },
 {
  path: &#39;/yingxiong&#39;,
  component: yingxiong
 }
];
export default routers;

Copy after login

(5 )content.vue

<template>
 <p class="content"><p>我是content！</p></p>
</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>

Copy after login

langren.vue / sanguo.vue / yingxiong.vue The code is the same as this, except that the color and p field have been changed.

That’s it for the main code.

5. Also write down the main errors encountered and their solutions

(1) Since it is used for es6 grammar, some of its grammar rules must be followed. , so some codes need an extra blank line at the end, some need to add semicolons, and some need to add spaces. Make changes according to the error report

(2) semi//indent//no-tabs error report, Change the code in .eslintrc.js as follows, mainly adding the last few lines.

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

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed examples of interaction between Servlet3.0 and pure javascript through Ajax

How to replace node elements with jQuery

Detailed tutorial on using Angular CLI to generate Angular 5 projects

The above is the detailed content of Use vue-router to build the bottom navigation bar in vue-cli (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!