Fox 3.0 Router 编程导航-打开open

打开页面-open

fox.router.open(route)

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

• 页面不存在，则新打开
• 页面已存在，则切换到到该页面
• 通过close方法才能关闭页面

其应用场景就是PC管理端中的多标签容器

关闭页面-close

fox.router.close(route)

通过该接口，可以关闭通过open方式打开的页面

多视图

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

例子

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

API

• fox.router.open(arg)
• fox.router.close(arg)

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

参数A（route路由对象）

fox.router.open(route) fox.router.close(route)

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

参数B(参数列表):

fox.router.open(path/name, data, root) fox.router.close(path/name)

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

index.ts（路由表注册）

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:38:12
 */
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 other from './components/other.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,
            }
        ]
    },
    {
        path:'/other',
        component:panel2,
        children:[
            {
                path:'',
                component:other,
            }
        ]
    }
]
export let FoxApp = {

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

} 

index.vue（路由演示）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:22:17
-->
<template>
    <div>
        <button class="my-button" @click="toHome">go home</button>
        <button class="my-button" @click="toAbout">go about</button>
        <button class="my-button" @click="toOther">go other</button>
        <button class="my-button" @click="closeHome">close home</button>
        <button class="my-button" @click="closeAbout">close about</button>
        <button class="my-button" @click="closeOther">close other</button>
    </div>
    <div class="router-view-div router-view-div">
        <fox-router-view class="fox-card-views" view-class="fox-card-view"
                                 view-active-class="fox-card-view-active"
                                 view-deactive-class="fox-card-view-deactive"
                                 transition = "true"
                                 transition-name = "fox-card-view-trans"
                                :multi="true"></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
import { FoxApp } from './index'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装fox app
        FoxApp.install(fox)

        let router = fox.router
        let toHome = ()=>{
             router.open('/home')
        }

        let toAbout = ()=>{
            router.open('/about')
        }

        let toOther = ()=>{
            router.open('/other')
        }

        let closeHome = ()=>{
             router.close('/home')
        }

        let closeAbout = ()=>{
            router.close('/about')
        }

        let closeOther = ()=>{
            router.close('/other')
        }

        return {
            toHome,
            toAbout,
            toOther,
            closeHome,
            closeAbout,
            closeOther,
        }
    },
})
</script>

<style>
    .router-view-div{
        width: 500px;
        height: 500px;
    }
    .fox-card-views{
        padding: 0px 0x 0px 0px;
        position: relative;
    }

    .fox-card-view{
        position: relative;
        overflow: hidden;
    }

    .fox-card-view-trans-enter-from, .fox-card-view-trans-show-from {
        opacity: 0;
    }

    .fox-card-view-trans-enter-active, .fox-card-view-trans-show-active{
        display: block !important;
        position: absolute;
        top:0px;
        z-index: 10;
    }

    .fox-card-view-trans-enter-to, .fox-card-view-trans-show-to {
        animation: fox-card-view-in-slide-right 3330ms;
        -webkit-animation: fox-card-view-in-slide-right 3330ms;
        z-index: 120;
    }

    .fox-card-view-trans-leave-from, .fox-card-view-trans-hide-from {
        /* 占位 */
    }

    .fox-card-view-trans-leave-active, .fox-card-view-trans-hide-active {
       
    }

    .fox-card-view-trans-leave-to, .fox-card-view-trans-hide-to {
        animation: fox-card-view-out 330ms;
       -webkit-animation: fox-card-view-out 330ms;
       z-index: 100;
    }

    /* 进场动画 */
    @-webkit-keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

    @keyframes fox-card-view-in-slide-right {
        0% {
            opacity: 0;
            -webkit-transform: translateX(30%);
            transform: translateX(30%)
        }
        100% {
            opacity: 1;
            -webkit-transform: translateX(0%);
            transform: translateX(0%)
        }
    }

     /* 进场动画 */
     @-webkit-keyframes fox-card-view-out {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    
    @keyframes fox-card-view-out {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>