Fox 3.0 Router 编程导航-打开append

新增页面-append

fox.router.append(route)

Fox router提供append方法，可以在同一个fox-router-view打开多个页面的机制，其特点是：

• 以堆栈的方式打开多个页面
• 新打开的页面为激活状态
• 其它页面处于失激活状态
• 关闭堆栈顶部页面后，下一个页面切换到激活状态，并重新恢复状态

其应用场景就是移动端打开新页面的场景

移除页面-remove

fox.router.remove(term)

移除堆栈顶部的激活页面，并把下一个页面切换为激活状态

remove的条件参数说明

• 移除最上层的页面 无参数
• 移除所有append页面 term = {all:true}
• 移除到指定页面 term = {unit: '/ahout'}

remove返回值

该方法方返回一个Promise<boolean>，value为false的时候代表无需要要移除的append页面了

多视图

open方式打开的页面，必须在多视图中，也就是fox-router-view的multi属性设置为true

例子

例子代码：sites/example/pages/program-navigate-append 例子说明：index.vue中fox-router-view设置multi=true，切换到多视图模式，并通过router.append方法把多个页面添加到多视图中

API

• fox.router.append(arg)
• fox.router.remove(arg)

open/remove方法的参数类型有两种:(route)|(path, data, root)

参数A（route路由对象）

fox.router.append(route) fox.router.remove(route)

属性	类型	说明
path	string	路由路径
name	string	路由名称
root	string	装载组件的router-view的名称
params	Object	路由参数
success	Function	页面装载成功后调用方法
error	Function	页面装载失败后调用方法
destroy	Function	页面销毁时调用方法

参数B(参数列表):

fox.router.append(path/name, data, root) fox.router.remove(path/name)

属性	类型	说明
path	string	路由路径
name	string	路由名称
data	Object	路由参数
root	string	装载组件的router-view的名称

index.ts（路由表注册）

import panel from './components/panel.vue'
import home from './components/home.vue'
import panel2 from './components/panel2.vue'
import about from './components/about.vue'

import notFound from '../not-found/index.vue'

//路由表
let routes = [
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:panel,
        children:[
            {
                path:'',
                component:home,
            }
        ]
    },
    {
        path:'/about',
        component:panel2,
        children:[
            {
                path:'',
                component:about,
            }
        ]
    }
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute({
            path:'/notFound',
            component:notFound
        })

        //加入路由
        fox.router.addRoutes(routes)
    }

} 

index.vue（路由演示）

<template>
    <div>
        <button class="my-button"  @click="toHome">append home</button>
        <button class="my-button" @click="toAbout">append about</button>
        <button class="my-button"  @click="remove">移除</button>
        <button class="my-button"  @click="removeAll">移除所有</button>
        <button class="my-button" @click="removeUnti">移除到about</button>
        
    </div>
    <div class="my-router-view-div">
        <fox-router-view class="fox-views fox-views-window my-views"
                     transition-name="fox-view-trans"
                     transition="true"
                     :multi="true"
                     :view-tag="tagProvider"
                     :view-tag-props="tagPropsProvider"/>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
import { FoxApp } from './index'
import dialog from './components/dialog.vue'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装fox app
        FoxApp.install(fox)
        //获取router
        let router = fox.router
        //append home页面
        let toHome = ()=>{
             router.append('/home')
        }
        //apend about页面
        let toAbout = ()=>{
            router.append('/about')
        }
        //移除最上层页面
        let remove = ()=>{
            router.remove()
        }
        //移除所有页面
        let removeAll = ()=>{
            router.remove({all:true})
        }
         //移除所有页面
         let removeUnti = ()=>{
            router.remove({until:'/about'})
        }

        let tagProvider = (route:any, index:number)=>{
            if(index == 0){
                return 'div'
            }else{
                return dialog
            } 
        }

        let top = 30
        let tagPropsProvider = (route:any, index:number)=>{
             let props = {
                 top:`${top+20*index}px`
             }
             return props
        }

       
        return {
            toHome,
            toAbout,
            remove,
            removeAll,
            removeUnti,
            tagProvider,
            tagPropsProvider,
        }
    },
})
</script>

<style>
    .my-views{
        position: relative;
    }
</style>