商城后台管理系统 01 Vue-pdf 打印合同-开发者社区

安装依赖 vue-pdf

code\vue-ego>npm i vue-pdf -S // 安装 code\vue-ego>npm uninstall vue-pdf // 卸载 事件 @num-pages="pageCount = $event" @page-loaded="currentPage = $event" 读文件的方法 var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

修改后的 src/pdfjsWrapper.js 备份

import { PDFLinkService } from 'pdfjs-dist/es5/web/pdf_viewer'; var pendingOperation = Promise.resolve(); export default function(PDFJS) { function isPDFDocumentLoadingTask(obj) { return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true; // or: return obj.constructor.name === 'PDFDocumentLoadingTask'; } function createLoadingTask(src, options) { var source; if (typeof(src) === 'string') source = { url: src }; else if (src instanceof Uint8Array) source = { data: src }; else if (typeof(src) === 'object' && src !== null) source = Object.assign({}, src); else throw new TypeError('invalid src type'); // source.verbosity = PDFJS.VerbosityLevel.INFOS; // source.pdfBug = true; // source.stopAtErrors = true; if (options && options.withCredentials) source.withCredentials = options.withCredentials; var loadingTask = PDFJS.getDocument(source); loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public if (options && options.onPassword) loadingTask.onPassword = options.onPassword; if (options && options.onProgress) loadingTask.onProgress = options.onProgress; return loadingTask; } function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) { var pdfDoc = null; var pdfPage = null; var pdfRender = null; var canceling = false; canvasElt.getContext('2d').save(); function clearCanvas() { canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height); } function clearAnnotations() { while (annotationLayerElt.firstChild) annotationLayerElt.removeChild(annotationLayerElt.firstChild); } this.destroy = function() { if (pdfDoc === null) return; // Aborts all network requests and destroys worker. pendingOperation = pdfDoc.destroy(); pdfDoc = null; } this.getResolutionScale = function() { return canvasElt.offsetWidth / canvasElt.width; } this.printPage = function(dpi, pageNumberOnly) { if (pdfPage === null) return; // 1in == 72pt // 1in == 96px var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi; var PRINT_UNITS = PRINT_RESOLUTION / 72.0; var CSS_UNITS = 96.0 / 72.0; // var iframeElt = document.createElement('iframe'); var printContainerElement = document.createElement('div'); printContainerElement.setAttribute('id', 'print-container') // function removeIframe() { // iframeElt.parentNode.removeChild(iframeElt); // } function removePrintContainer() { printContainerElement.parentNode.removeChild(printContainerElement); } new Promise(function(resolve, reject) { // iframeElt.frameBorder = '0'; // iframeElt.scrolling = 'no'; // iframeElt.width = '0px;' // iframeElt.height = '0px;' // iframeElt.style.cssText = 'position: absolute; top: 0; left: 0'; // iframeElt.onload = function() { // resolve(this.contentWindow); // } // window.document.body.appendChild(iframeElt); printContainerElement.frameBorder = '0'; printContainerElement.scrolling = 'no'; printContainerElement.width = '0px'; printContainerElement.height = '0px'; printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0'; window.document.body.appendChild(printContainerElement); resolve(window) }) .then(function(win) { win.document.title = ''; return pdfDoc.getPage(1) .then(function(page) { var viewport = page.getViewport({ scale: 1 }); // win.document.head.appendChild(win.document.createElement('style')).textContent = printContainerElement.appendChild(win.document.createElment('style')) .textContent = '@supports ((size:A4) and (size:1pt 1pt)) {' + '@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' + '}' + '#print-canvas {display: none}' + '@media print {' + 'body { margin: 0 }' + // 'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' + '#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid;display: block }' + 'body > *:not(#print-container) {display: none;}' + '}' + '@media screen {' + 'body { margin: 0 }' + // '}' + // '' '}' return win; }) }) .then(function(win) { var allPages = []; for (var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber) { if (pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1) continue; allPages.push( pdfDoc.getPage(pageNumber) .then(function(page) { var viewport = page.getViewport({ scale: 1 }); //var printCanvasElt = win.document.body.appendChild(win.document.createElement('canvas')); var printCanvasElt = printContainerElemnet.appendChild(win.document .createElement('canvas')); printCanvasElt.setAtribute('id', 'print.canvas') printCanvasElt.width = (viewport.width * PRINT_UNITS); printCanvasElt.height = (viewport.height * PRINT_UNITS); return page.render({ canvasContext: printCanvasElt.getContext('2d'), transform: [ // Additional transform, applied just before viewport transform. PRINT_UNITS, 0, 0, PRINT_UNITS, 0, 0 ], viewport: viewport, intent: 'print' }).promise; }) ); } Promise.all(allPages) .then(function() { win.focus(); // Required for IE if (win.document.queryCommandSupported('print')) { win.document.execCommand('print', false, null); } else { win.print(); // } // removeIframe(); } removePrintContainer(); }) .catch(function(err) { // removeIframe(); removePrintContainer(); emitEvent('error', err); }) }) } this.renderPage = function(rotate) { if (pdfRender !== null) { if (canceling) return; canceling = true; pdfRender.cancel().catch(function(err) { emitEvent('error', err); }); return; } if (pdfPage === null) return; var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate); var scale = canvasElt.offsetWidth / pdfPage.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1); var viewport = pdfPage.getViewport({ scale: scale, rotation: pageRotate }); emitEvent('page-size', viewport.width, viewport.height, scale); canvasElt.width = viewport.width; canvasElt.height = viewport.height; pdfRender = pdfPage.render({ canvasContext: canvasElt.getContext('2d'), viewport: viewport }); annotationLayerElt.style.visibility = 'hidden'; clearAnnotations(); var viewer = { scrollPageIntoView: function(params) { emitEvent('link-clicked', params.pageNumber) }, }; var linkService = new PDFLinkService(); linkService.setDocument(pdfDoc); linkService.setViewer(viewer); pendingOperation = pendingOperation.then(function() { var getAnnotationsOperation = pdfPage.getAnnotations({ intent: 'display' }) .then(function(annotations) { PDFJS.AnnotationLayer.render({ viewport: viewport.clone({ dontFlip: true }), div: annotationLayerElt, annotations: annotations, page: pdfPage, linkService: linkService, renderInteractiveForms: false }); }); var pdfRenderOperation = pdfRender.promise .then(function() { annotationLayerElt.style.visibility = ''; canceling = false; pdfRender = null; }) .catch(function(err) { pdfRender = null; if (err instanceof PDFJS.RenderingCancelledException) { canceling = false; this.renderPage(rotate); return; } emitEvent('error', err); }.bind(this)) return Promise.all([getAnnotationsOperation, pdfRenderOperation]); }.bind(this)); } this.forEachPage = function(pageCallback) { var numPages = pdfDoc.numPages; (function next(pageNum) { pdfDoc.getPage(pageNum) .then(pageCallback) .then(function() { if (++pageNum <= numPages) next(pageNum); }) })(1); } this.loadPage = function(pageNumber, rotate) { pdfPage = null; if (pdfDoc === null) return; pendingOperation = pendingOperation.then(function() { return pdfDoc.getPage(pageNumber); }) .then(function(page) { pdfPage = page; this.renderPage(rotate); emitEvent('page-loaded', page.pageNumber); }.bind(this)) .catch(function(err) { clearCanvas(); clearAnnotations(); emitEvent('error', err); }); } this.loadDocument = function(src) { pdfDoc = null; pdfPage = null; emitEvent('num-pages', undefined); if (!src) { canvasElt.removeAttribute('width'); canvasElt.removeAttribute('height'); clearAnnotations(); return; } // wait for pending operation ends pendingOperation = pendingOperation.then(function() { var loadingTask; if (isPDFDocumentLoadingTask(src)) { if (src.destroyed) { emitEvent('error', new Error('loadingTask has been destroyed')); return } loadingTask = src; } else { loadingTask = createLoadingTask(src, { onPassword: function(updatePassword, reason) { var reasonStr; switch (reason) { case PDFJS.PasswordResponses.NEED_PASSWORD: reasonStr = 'NEED_PASSWORD'; break; case PDFJS.PasswordResponses.INCORRECT_PASSWORD: reasonStr = 'INCORRECT_PASSWORD'; break; } emitEvent('password', updatePassword, reasonStr); }, onProgress: function(status) { var ratio = status.loaded / status.total; emitEvent('progress', Math.min(ratio, 1)); } }); } return loadingTask.promise; }) .then(function(pdf) { pdfDoc = pdf; emitEvent('num-pages', pdf.numPages); emitEvent('loaded'); }) .catch(function(err) { clearCanvas(); clearAnnotations(); emitEvent('error', err); }) } annotationLayerElt.style.transformOrigin = '0 0'; } return { createLoadingTask: createLoadingTask, PDFJSWrapper: PDFJSWrapper, } }

打印解决乱码

pdf 打印的时候 看到视图 乱码的中文 vue-pdf网址: https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ee7 arioth:master src/pdfjsWrapper.js // var iframeElt = document.createElement('iframe'); var printContainerElement = document.createElement('div'); printContainerElement.setAttribute('id','print-container') function removePrintContainer() { printContainerElement.parentNode.removeChild(printContainerElement); } ----- new Promise(function(resolve, reject) { // iframeElt.frameBorder = '0'; // iframeElt.scrolling = 'no'; // iframeElt.width = '0px;' // iframeElt.height = '0px;' // iframeElt.style.cssText = 'position: absolute; top: 0; left: 0'; // iframeElt.onload = function() { // resolve(this.contentWindow); // } // window.document.body.appendChild(iframeElt); printContainerElement.frameBorder = '0'; printContainerElement.scrolling = 'no'; printContainerElement.width = '0px'; printContainerElement.height = '0px'; printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0'; window.document.body.appendChild(printContainerElement); resolve(window) }) ------ printContainerElement.frameBorder = '0'; printContainerElement.scrolling = 'no'; printContainerElement.width = '0px'; printContainerElement.height = '0px'; printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0'; window.document.body.appendChild(printContainerElement); resolve(window) ==== printContainerElement.appendChild(win.document.createElment('style')).textContent = ==== '#print-canvas {display: none}' + === '#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid;display: block }' + 'body > *:not(#print-container) {display: none;}' + === var printCanvasElt = printContainerElemnet.appendChild(win.document.createElement('canvas')); printCanvasElt.setAtribute('id','print.canvas') === } removePrintContainer(); === removePrintContainer();

老师的合同

Example - display multiple pages of the same pdf document

示例——显示同一 PDF 文档的多个页面

<template> <div> <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 25%" ></pdf> </div> </template> <script> import pdf from 'vue-pdf' // 读 pdf 文件的方法 var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf'); export default { components: { pdf }, data() { return { src: loadingTask, numPages: undefined, } }, mounted() { this.src.promise.then(pdf => { this.numPages = pdf.numPages; }); } } </script>

<template> <div> <input type="checkbox" v-model="show"> <select v-model="src" style="width: 30em"> <option v-for="item in pdfList" :value="item" v-text="item"></option> </select> <input v-model.number="page" type="number" style="width: 5em"> /{{numPages}} <button @click="rotate += 90">&#x27F3;</button> <button @click="rotate -= 90">&#x27F2;</button> <button @click="$refs.pdf.print()">print</button> <div style="width: 50%"> <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div> <pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event"></pdf> </div> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf: pdf }, data () { return { show: true, pdfList: [ '', 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf', 'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf', 'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf', 'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf', 'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf', 'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK', ], src:'', loadedRatio: 0, page: 1, numPages: 0, rotate: 0, } }, methods: { password: function(updatePassword, reason) { updatePassword(prompt('password is "test"')); }, error: function(err) { console.log(err); } } } </script>

## vue-PDF 参考: github: https://github.com/FranckFreiburger/vue-pdf 步骤: 1, npm install --save vue-pdf 2, import pdf from 'vue-pdf' 3, components: { pdf } 4, <pdf src="./static/relativity.pdf"></pdf> 问题: pdf 打印的时候 看到视图 乱码的中文 vue-pdf网址: https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ee7

Vue-pdf打印合同实现代码如下

1, src/views/Layout/Mymenu.vue <template> <div> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router :collapse="isCollapse"> <el-menu-item> <i class="iconfont icon-icon_nav" style="color: skyblue;padding-right: 6px;font-size: 24px;"></i> <span slot="title">易购后台管理系统</span> </el-menu-item> <el-menu-item index="/"> <i class="el-icon-menu"></i> <span slot="title">{{ $t("menu.home") }}</span> <!-- <span slot="title">首页</span> --> </el-menu-item> <el-menu-item index="/goods"> <i class="el-icon-document"></i> <span slot="title">{{ $t("menu.goods") }}</span> <!-- <span slot="title">商品管理</span> --> </el-menu-item> <el-submenu index="/params"> <template slot="title"> <i class="el-icon-setting"></i> <span slot="title">{{ $t("menu.params") }}</span> <!-- <span slot="title">规格参数</span> --> </template> <el-menu-item index="/params/specifications"> <i class="el-icon-document"></i> <span>规格与包装</span> </el-menu-item> </el-submenu> <el-menu-item index="/advert"> <i class="el-icon-setting"></i> <!-- <span slot="title">{{ $t("menu.advert") }}</span> --> <span slot="title">广告分类</span> </el-menu-item> <el-menu-item index="/logistics"> <i class="el-icon-setting"></i> <!-- <span slot="title">{{ $t(menu.logistics) }}</span> --> <span slot="title">物流管理</span> </el-menu-item> <el-submenu index="/order"> <template slot="title"> <i class="el-icon-location"></i> <!-- <span>{{ $t(menu.order) }}</span> --> <span>订单管理</span> </template> <el-menu-item-group> <template slot="title">订单管理</template> <el-menu-item index="/order/order-list"> <i class="el-icon-menu"></i> <span>订单列表</span> </el-menu-item> <el-menu-item index="/order/order-shipment"> <i class="el-icon-menu"></i> <span>发货列表</span> </el-menu-item> <el-menu-item index="/order/order-exchange"> <i class="el-icon-menu"></i> <span>换货列表</span> </el-menu-item> <el-menu-item index="/order/order-back"> <i class="el-icon-menu"></i> <span>退货管理</span> </el-menu-item> </el-menu-item-group> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="5-3">选项1</el-menu-item> <el-menu-item index="5-4">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="5-5">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="/user"> <i class="el-icon-setting"></i> <!-- <span slot="title">{{ $t(menu.my) }}</span> --> <span slot="title">个人中心</span> </el-menu-item> </el-menu> </div> </template> <script> export default { // 子组件Mymenu接收父组件(index)传递过来的数据 props: ['isCollapse'], data() { return { // isCollapse: false }; }, }; </script> <style lang="less" scoped> .el-menu { border-right: 0; .is-active { background: #1e78bf !important; color: #fff !important; } } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> 2, src/views/User/VuePdf.vue <template> <el-dialog title="合同内容" :visible.sync="dialogVisible" width="70%" :before-close="handleClose"> <!-- <span>这是一段信息</span> --> <!-- 属性: :src='' 表示PDF文件的URL 文件的路径 :page 显示页码 :rotate 旋转90的倍数 event: @num-pages 拿所有页码 page-loaded 拿当前页码 @num-pages="pageCount = $event" 获取总页码 @page-loaded="currentPage = $event" 获取当前页码 style="" 可以设置文件大小 methods: print() 打印 --> <hr /> <el-button @click="num=num-1">上一页</el-button> <el-button @click="num++">下一页</el-button> <hr /> {{currentPage}}/{{pageCount}} <el-button @click="print">打印合同</el-button> <!-- pdf基本写法 1--> <pdf src='./color.pdf' ref="myPdf" :page="num" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"> </pdf> <!-- pdf写法 2 展示所有 同一个pdf 文件的所有页面--> <!-- <pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 25%"></pdf> --> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </template> <script> // 安装vue-pdf: npm i vue-pdf -S 导入 使用 import pdf from 'vue-pdf' // 获取 pdf 文件 // var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf'); // const source = pdf.createLoadingTask('./color.pdf'); export default { components: { pdf }, data() { return { dialogVisible: false, num: 1, currentPage: 0, // 默认当前页为0 pageCount: 0 // 默认总页码数为0 // numPages: undefined, // src: source // src: loadingTask }; }, // 通过生命周期函数去读取 mounted() { this.src.promise.then(pdf => { this.numPages = pdf.numPages; }); }, methods: { // 打印合同 print() { this.$refs.myPdf.print(); } } } </script> <style> </style> 3, src/views/User/index.vue <template> <div> <h2>个人中心</h2> <el-button @click="look">查看合同</el-button> <VuePdf ref="myPdf" /> </div> </template> <script> import VuePdf from '@/views/User/VuePdf' export default { components: { VuePdf }, methods: { look() { this.$refs.myPdf.dialogVisible = true } } } </script> <style> </style> 4, src/router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Layout from '@/views/Layout/index.vue' import Home from '@/views/Home/index.vue' import Login from '@/views/Login/Login.vue' // 异步 const Goods = () => import('../views/Goods/GoodsList/Goods.vue') const Params = () => import('../views/Params/Params.vue') const Specifications = () => import('../views/Params/ParamsInfo/Specifications.vue') const Advert = () => import('../views/Advert/Advert.vue') const User = () => import('../views/User/index.vue') const Logistics = () => import('../views/Logistics/Logistics.vue') const Order = () => import('../views/Order/index.vue') const OrderList = () => import('../views/Order/OrderList/index.vue') const OrderBack = () => import('../views/Order/OrderBack/index.vue') const OrderShipment = () => import('../views/Order/OrderShipment/index.vue') const OrderExchange = () => import('../views/Order/OrderExchange/index.vue') // 子级路由 const AddGoods = () => import('../views/Goods/GoodsList/AddGoods.vue') Vue.use(VueRouter) const routes = [{ path: '', component: Layout, // 路由的元信息 meta: { isLogin: false }, children: [{ path: '/', name: 'Home', component: Home }, { path: '/goods', name: 'Goods', component: Goods }, { path: '/add-goods', name: 'AddGoods', component: AddGoods }, { path: '/params', name: 'Params', component: Params, redirect: '/params/specifications', children: [{ path: 'specifications', name: 'Specifications', component: Specifications }] }, { path: '/advert', name: 'Advert', component: Advert }, { path: '/user', name: 'User', component: User }, { path: '/logistics', name: 'Logistics', component: Logistics }, { path: '/order', name: 'Order', component: Order, redirect: '/order/order-list', children: [{ path: 'order-list', component: OrderList }, { path: 'order-back', component: OrderBack }, { path: 'order-shipment', component: OrderShipment }, { path: 'order-exchange', component: OrderExchange }] }] }, { path: '/login', name: 'Login', component: Login, } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router