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

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

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

续言

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

最终效果：

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: ''
})

报错信息：

image.png

原因没有在main.js引入：

import VueRouter from 'vue-router'

新的错误信息：

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

found in

--->  at src\App.vue

从页面上的错误信息分析，可能是相关的组件没有注册？
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: ''
})

问题：
组件无法渲染出来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的页面代码为：

(7)App.vue的代码：

（8）查看效果

image.png

结束

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


       # 所有的路由的都会匹配这里进行把路由下的相关的组件进行渲染

总结2：

image.png

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

image.png

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

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

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

续言

页面缓存需求说明

底部导航开始思路

结束

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