第二个问题,大概就是本文的重点了,这里详细说明一下需求,每个 tab 都可以在 tab 内部 跳转
,这里的跳转,要做的跟 vue-router 的有大体上差不多,要能 push, replace, back,还能带参数。
那么怎么实现呢? 首先维护一个打开的 tab 列表,然后每个列表里面再维护一个用过的组件列表(包含参数),这样大概就能实现了吗?当然不是,组件的跳转,参数的传递,不可能让使用者自己去实现这些方法吧,我选择把封装一个公共对象,然后挂载在 vue.prototype上。然后类似 vue.$router.xxxx 一样(我的命名是 vue.$tab)可以在页面的任何地方使用,如果你对具体的实现方法有兴趣,欢迎点击本文结尾的链接,去我的Github仓库上查看。
组件异步加载
之前只用过基于 vue-router 的异步加载方法,然而这个项目里面并没有使用 vue-router,怎么异步呢? 翻了一下 vue 的官方文档是这么写的:
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component'))
然而我试了一下,发现报错了,import 不能在这里使用,换了 require 也不行,不知道上我哪里没弄好,如果你刚好知道又刚好有空,请告诉我,谢谢!后面在 segmentfault 上 看到 这一篇, 使用 webpack 的 require.ensure 可以实现
// 第一个字符串是 组件名,第二个是 组件路径,第三个是 chunkName (如果不指定则以1.js,2.js....n.js命名)vue.component('home', (resolve) => {require.ensure([], ()=>resolve(require('@/Views/index.vue')), 'home')})
顺便还要在 webpack 里面的 output 下面配置一下 chunkFilename: '[name].js',
, 当然文件名格式可以按你项目的需求来,我这边就按最简单的
相关推荐:
canvas与h5如何实现视频截图功能
HTML5 Canvas自定义圆角矩形与虚线的代码实例介绍