动态路由 及电子书渲染实现--项目实际开发记录（二）

第一步

清空src/components目录，并创建ebook文件夹，且在里面创建EbookReader.vue文件来接受动态路由

第二步

修改router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/ebook',
    },
    {
      path: '/ebook',
      component: () => import('./views/ebook/index.vue'),
      children: [
        {
          path: ':fileName',
          component: () => import('./components/ebook/EbookReader.vue')
        }
      ]
    }
  ]
})

第三步

index.vue中引用EbookReader组件

<template>
    <div class="ebook">
        <ebook-reader/>
    </div>
</template>

<script>
import EbookReader from '../../components/ebook/EbookReader'
export default {
    components: {
        EbookReader
    }
}
</script>

<style lang="scss" scoped="scoped">
    @import "../../assets/styles/global"
</style>

EbookReader组件

<template>
    <div class="ebook-reader">
        {{$route.params.fileName}}
    </div>
</template>

<script>
</script>

<style>
</style>

第四步

根据动态路由显示不同的书,并可以通过nginx地址下载
EbookReader组件

<template>
    <div class="ebook-reader">
        <div id="read"></div>
    </div>
</template>

<script>
    export default {
        mounted() {
            //nginx文件的路径
            const baseUrl = 'http://192.168.0.101:8081/epub/'
            const fileName = this.$route.params.fileName.split('|').join('/');
            console.log(`${baseUrl}${fileName}.epub`)
        }
    }
</script>

<style>
</style>

地址栏中添加对应的电子书路径

点击地址下载对应的电子书

第五步

EbookReader组件中引入epubjs进行电子书渲染,由于fileName好多组件公用我们使用vuex来进行管理

EbookReader组件

<template>
    <div class="ebook-reader">
        <div id="read"></div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import Epub from 'epubjs'
    global.ePub = Epub
    export default {
        computed: {
            ...mapGetters(['fileName'])
        },
        methods: {
          initEpub() {
            //nginx文件的路径
            const url = 'http://192.168.0.101:8081/epub/'+this.fileName+'.epub';  
            // console.log(url)
            this.book = new Epub(url);
            // console.log(this.book)
            this.rendition = this.book.renderTo('read',{
                width: innerWidth,
                height: innerHeight,
                // 做微信的兼容性配置
                method: 'default'
            })
            this.rendition.display();
          }  
        },
        mounted() {
            const fileName = this.$route.params.fileName.split('|').join('/');
            this.$store.dispatch('setFileName',fileName).then(()=>{
                this.initEpub();
            })
        }
    }
</script>

<style>
</style>

store/modules/book.js

const book = {
    state: {
      fileName: ''
    },
    mutations: {
      'SET_FILENAME': (state,fileName)=>{
        state.fileName = fileName
      }
    },
    actions: {
      //commit参数用来调用mutations方法，state用来获取原先得值
      setFileName: ({commit},fileName)=>{
        // 修改fileName得值,必须用return，这样我们可以用then链式操作
        return commit('SET_FILENAME',fileName)
      }
    }
}
export default book

store/getter.js

const book = {
    fileName: state => state.book.fileName
}
export default book