动态路由设置、nginx简单配置

动态路由

1、router.js中写的是路由参数

import Vue from "vue";
import Router  from "vue-router";
import Ebook from './views/ebook/index.vue'

Vue.use(Router)

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

2、在组件中，进行动态路由的设置

<script>
import Epub from "epubjs";
global.ePub = Epub;
export default {
  mounted() {
    //   创建动态路由,使用param参数
    const fileName = this.$route.params.fileName.split("|").join("/");
    this.setFileName(fileName).then(() => {
      this.initEpub();
    });
  },
 ...
};

epub解析和渲染

import Epub from "epubjs";
global.ePub = Epub;

//这里有用nginx创建一个服务代理
 const url = "http://localhost:8081/epub/" + this.fileName + ".epub";
      this.book = new Epub(url);
      this.rendition = this.book.renderTo("read", {
        width: window.innerWidth,
        height: window.innerHeight,
        methods: "default",
      });
      this.rendition.display();

nginx的服务代理

 server{
        listen 8081;
        server_name resource;//本地的一个文件名
        root /Users/***/***/resource;//文件地址
        autoindex on;//目录浏览
        location /{
            add_header Access-Control-Allow-Origin *;//解决跨域问题
        }
        add_header Cache-Control "no-cache,must-revalidate";//设置不使用缓存