python web（bottle框架）知行合一之-简单知识付费平台-”全栈“实践(15)---前端页面底部导航菜单

PS：笔记只是为了更好表达我怎么语言表述，有些时候可能难免废话一推！
因知识有限, 如有错误, 欢迎指正！

每日细语：学海无涯苦作舟！

续言

前面我们已经把VUX引入到我们的前端项目之中，这节开始。我们开始进行我们的项目的底部的导航栏的设计。
目前我们的导航栏底部暂时是写死的前端的方式，暂时不需要动态的修改。

最终效果：

image.png
image.png

页面缓存需求说明

因为我们SPA的页面有一个诉求，就是我们下一页如何返回到上一页的页面的原来的位置，即页面缓存。

比如去在A页面列表点击课程详细查看，跳转到B页面，从B页面返回A页面的列表依然还保持上一个页面的位置。

所以我们还需要另外一个插件来帮助我们进行页面的缓存：
vue-navigation
安装vue-navigation：

image.png

npm i -S vue-navigation

然后在main.js引入并使用。

import Navigation from 'vue-navigation'

image.png

后续的使用再下面的底部导航按钮继续展开说明。

底部导航开始思路

1：重新规划路由组件加载方式，启用懒加载

image.png

原来的index.js代码为：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

修改之后的代码：

const Index = resolve => require(['../components/Index'], resolve)

const routers = [{
  path: '/',
  name: 'index',
  redirect: '/r/home',
  component: Index,
  }
]

export default routers

image.png

然后在main.js引入：

import routes from './router'

错误信息：

Module build failed: D:/vue_pro/kownledpay/src/main.js: Duplicate declaration "router"

原因加载了多个router

修改周的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 'vue'
import App from './App'
import Navigation from 'vue-navigation'
import { AlertPlugin, ToastPlugin, LoadingPlugin, ConfirmPlugin, WechatPlugin } from 'vux'
import routers from './router'

Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)
Vue.use(ConfirmPlugin)
Vue.use(WechatPlugin)




Vue.config.productionTip = false

const tabbars = ['index', 'home', 'member', 'courses', 'circle', 'vip']
Vue.prototype.tabbars = tabbars

const router = new VueRouter({
  mode: 'history',
  routers,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (tabbars.indexOf(to.name) < 0) {
        return {x: 0, y: 0}
      }
    }
  }
})


Vue.use(Navigation, {router}) // router为路由文件
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

报错信息：

image.png

原因没有在main.js引入：

import VueRouter from 'vue-router'

新的错误信息：

vue.esm.js?efeb:591 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App> at src\App.vue
       <Root>

从页面上的错误信息分析，可能是相关的组件没有注册？
Vue.use(VueRouter)?

可是查看main.js是由注册的啊！

image.png

后来才知道：原来是缺少了

Vue.use(VueRouter)

image.png

最新的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 'vue'
import App from './App'
import Navigation from 'vue-navigation'
import { AlertPlugin, ToastPlugin, LoadingPlugin, ConfirmPlugin, WechatPlugin } from 'vux'

import VueRouter from 'vue-router'
import routers from './router'

Vue.use(AlertPlugin)
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)
Vue.use(ConfirmPlugin)
Vue.use(WechatPlugin)




Vue.config.productionTip = false

const tabbars = ['index', 'home', 'member', 'courses', 'circle', 'vip']
Vue.prototype.tabbars = tabbars

const router = new VueRouter({
  mode: 'history',
  routers,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (tabbars.indexOf(to.name) < 0) {
        return {x: 0, y: 0}
      }
    }
  }
})

Vue.use(VueRouter)
Vue.use(Navigation, {router}) // router为路由文件
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

问题：
组件无法渲染出来I：

image.png

发现的问题点是：

image.png

这个的routers 必须是 routes这个单词，如果按自己的自定义的话 就无法加载组件！！！
了解了一下关于路由中有三个基本的概念 route, routes, router。

把routers ---->routes

const Index = resolve => require(['../components/Index'], resolve)

const routes  = [{
  path: '/',
  name: 'index',
  component: Index
}
]
export default routes

对应的main.js也需要改变

image.png

结果组件被渲染出来了！！！成功匹配到了那个路由地址了！

image.png

2：使用VUX的底部导航组件进行设计

首先改造一下App.vue
（1）

image.png

（2）添加相关样式文件之后的报错

image.png

原因是：
background-color: @page-bg; 属于公共全局的样式，需要配置成全局样式。

配置的方式修改webpack.base.conf.js：

修改为：

// const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

// module.exports = vuxLoader.merge(webpackConfig, {
//   plugins: ['vux-ui']
// })


module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {
    name: 'less-theme',
    path: 'src/styles/theme.less'
  }],
})

（3）结束一下服务，重新启动！

image.png

（4）运行无问题：

image.png

（5）index.vue的页面代码为：

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <tabbar style="position:fixed">
      <tabbar-item v-for="(item,index) in tabbars" @on-item-click="item_click" :key="index"
                   :link="{name:item.route_name,replace:true}" :selected="route_name===item.route_name?true:false">
        <span slot="icon" class="iconfont tabbar-icon" :class="item.icon"></span>
        <!--<span slot="icon-active" class="iconfont tabbar-icon" :class="item.icon_active"></span>-->
        <span slot="label">{{item.name}}</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import {Tabbar, TabbarItem} from 'vux'
  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data () {
      return {
        route_name: '',
        selected: 1,
        tabbars: [
          {
            name: '课程',
            route_name: 'home',
            icon: 'icon-home',
            icon_active: 'icon-homefill'
          },
          {
            name: '我的',
            route_name: 'member',
            icon: 'icon-my',
            icon_active: 'icon-myfill'
          }
        ]
      }
    },
    mounted () {
      this.route_name = this.$route.name
    },
    methods: {
      item_click (index) {
        let item = this.tabbars[index]
        if (item.route_name === this.route_name) {
          document.body.scrollTop = 0
          document.documentElement.scrollTop = 0
        }
      }
    }

  }
</script>

<style lang="less">
  .tabbar-icon {
    font-size: 23px;
    line-height: 27px;
  }
</style>

(7)App.vue的代码：

<template>
  <div id="app">
    <div class="base-bg"></div>
    <navigation>
      <router-view></router-view>
    </navigation>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style lang="less">
  @import "~vux/src/styles/reset.less";
  @import "~vux/src/styles/1px.less";
  @import "./styles/common.less";

  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  body {
    background-color: @page-bg;
  }

  .base-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @page-bg;
    z-index: 0;
  }

  .load-more-view {
    height: 50px;
  }
</style>

（8）查看效果

image.png

结束

关于App.vue和index.vue
总结1：
我们访问不同的页面是通过路由来进行访问的。所以app.vue入口处，它会匹配一个根的路由。
所以是设计成为了：

<navigation>
      <router-view></router-view> # 所有的路由的都会匹配这里进行把路由下的相关的组件进行渲染
  </navigation>

总结2：

image.png

因为我们的第一个页面组件下其实包含了其他子组件，所有一般是设计成了需二级路由进行匹配！

image.png

总结3： 只要涉及到修改了webpack的配置信息的话，都需要重启一下才回生效！

以上笔记纯属个人学习实践总结，有兴趣的同学可以加群一起学习讨论QQ：308711822