Fox 3.0 Router 编程导航-替换to

编程导航(to方式)

Fox Router通过API的方式，替换fox-router-view中的内容，方法to会用新的内容替换到fox-router-view中旧的内容。例子如下：

例子代码：sites/example/pages/program-navigate 例子说明：index.vue中通过router.to方法，演示了页面替换

API

fox.router.to(arg)

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

参数A（route路由对象）

fox.router.to(route)

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

参数B(参数列表):

fox.router.to(path/name, data, root)

属性	类型	说明
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 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（路由演示）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-11 15:22:17
-->
<template>
    <div>
        <fox-router-link tag='button' to='/home' class="my-button">go home</fox-router-link>
        <fox-router-link tag='button' to='/about' class="my-button">go about</fox-router-link>
        <button class="my-button" @click="closeHome">close home</button>
        <button class="my-button" @click="closeAbout">close about</button>
    </div>
    <div class="my-router-view-div">
        <fox-router-view></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.push('/home')
        }

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

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

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

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

<style scoped>
   .fox-router-link-active{
       color:red
   }
</style>