Fox 2.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（路由表注册）

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>
        <div>
            <button class="my-button" @click="toHome">go home</button>
            <button class="my-button" @click="toAbout">go about</button>
            <button class="my-button" @click="closeHome">close home</button>
            <button class="my-button" @click="closeAbout">close about</button>
            <button class="my-button" @click="changeProps">change props</button>
        </div>
        <div class="my-router-view-div">
            <fox-router-view :pass-props="passProps"></fox-router-view>
        </div>
    </div>
</template>
<script>
import { FoxApp } from './index.ts'

export default {
    data() {
        return {
            passProps: {
                index: 0,
                name: 'jiangcheng'
            }
        }
    },
    created() {
        // 获取 fox
        let fox = this.$fox
        // 安装fox app
        FoxApp.install(fox)
    },
    // 方法
    methods: {
        toHome() {
            console.info('--------- navigate to home a')
            this.$router.push('/home')
        },

        toAbout() {
            console.info('--------- navigate to about b')
            this.$router.push('/about')
        },

        closeHome() {
            this.$router.close('/home')
        },

        closeAbout() {
            this.$router.close('/about')
        },

        changeProps() {
            console.info('---------', this.passProps)
            this.passProps.index++
            this.passProps.name = this.passProps.index % 2 == 0 ? 'hello' : 'jiangheng'
        }
    }
}
</script>

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