NextPage

描述

Nextpage是原有产品(公司原有基于AngularJS构建的产品)中重构而来的,适用于公司业务流程的一个全局插件.

• 它可以实现在不改变路由的情况下,在模块中添加多级页面,如下图所示,并支持无限嵌套.
• 它可以在各级Nextpage页面中相互传递数据.
• 它会在新创建的页面自动创建一个面包屑breadCrumb以及一些实例方法.

[info] Nextpage 是全局的

这意味着在你所开发的组件中不需要引入任何东西,Nextpage会在每个创建的Vue实例中绑定一个 vm.$nextPage(options)方法

演示

// FooComponent
<script>
// 导入一个组件
import BarComponent from './BarComponent'
export default {
    name:'FooComponent',
    data () {
    },
    methods: {
        createNp () {
            this.$nextPage({
                title: 'Create New Component',
                props: {
                    name: 'HelloWorld!'
                },
                show() {
                },
                beforeClose(nextpageInstance) {
                },
                component: BarComponent,
                cache: true
            })
        }
    }
}
</script>

// BarComponent
<script>
export default {
    name: 'BarComponent',
    props: ['name'],
    methods: {
        close () {
            // 关闭当前页面
            this.closeNextPage(this)
        }
    }
}
</script>

[warning] 注意关闭方法中的this

通过NextPage打开的业务组件内调用closeNextPage()方法时,必须传递当前实例的引用this,如上面的例子所示

NextPage 属性

NextPage 方法

NextPage 钩子函数