Mu-page NPM | npm.io

mu-page

mu-page 为vue插件，在多标签页场景下使用，可以保存标签页状态。

构建工程

npm install

运行样例

npm run serve

构建插件

npm run build:lib

使用

导入

import muPage from 'mu-page'

<script src="./muPage.umd.js"></script>

在vue中使用

Vue.use(MuPage);
const muPage = new MuPage({components: {
  test1: import('./testViews/test1.vue'),
  test2: import('./testViews/test2.vue'),
  test3: import('./testViews/test3.vue'),
  test4: import('./testViews/test4.vue'),
  test5: import('./testViews/test5.vue')
}, homePage: 'test1', errorPage: errorPage});
new Vue({
  muPage,
  render: h => h(App),
}).$mount('#app');

App.vue

<template>
  <div id="app">
    <mu-page/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

组件

<mu-page>

页面显示组件，打开的页面通过此组件显示。

属性	参数	说明
pageStyle	<Object>	显示页面样式

<mu-page-link>

页面打开组件，可通过该组件打开页面

属性	参数	说明
to	<string>	要跳转的页面名称
me	<string>	跳转方式 open或push(默认 push)
data	<string>	要传递的数据，push有效

构造参数

名称	类型	说明
components	<object>	注册页面页面名-页面参数
homePage	<string>	主页名
errorPage	<object>	错误页面 vue组件

{
  components: {
    'page1': import('./view.vue'),
    'page2': './view.vue',
    'page3': required('./view.vue')
  },
  homePage: 'page1'
}
// 推荐使用import导入

实例方法

名称	参数	返回值	说明
open	<string>页面名	<void>	打开页面，不刷新已打开的。
push	<string>页面名, <any>传递参数	<void>	打开页面，刷新已打开的。
close	<string>页面名	<void>	关闭页面，*关闭所有（主页不会被关闭）
closeOther	<void>	<void>	关闭除当前与主页外页面。
isOpen	<string>页面名	<boolean>	判断当前页面是否打开。
openHomePage	<any>传递参数	<void>	打开主页。