Fox 2.0 Router link导航

link导航

Fox router框架可以通过fox-link和fox-router-view这两个内置的组件，实现页面导航。 例子如下：

例子代码：sites/example/pages/link-navigate-to

例子说明：index.ts进行了路由组成，而index.vue中fox-link+fox-router-view进行了link路由导航演示

index.ts（路由表注册）

// 路由表
let routes = [
    {
        path: '/',
        redirect: '/dog'
    },
    {
        path: '/dog',
        component: () => import('./components/dog.vue')
    },
    {
        path: '/car',
        component: () => import('./components/car.vue')
    }
]

// Fox App
export let FoxApp = {
    /** *
     * 安装
     */
    install(fox: any) {
        fox.router.onError(msg => {
            console.error(msg)
        })
        // 加入路由
        fox.router.addRoutes(routes)
    }
}

index.vue（路由演示）

<template>
    <div>
        <div class="link-items">
            <fox-router-link class="my-link" active-class="fox-router-link-active" tag="a" to="/dog">go home</fox-router-link>
            <fox-router-link class="my-link" active-class="fox-router-link-active" tag="a" to="/car">go about</fox-router-link>
        </div>
        <div class="my-router-view-div">
            <fox-router-view></fox-router-view>
        </div>
    </div>
</template>
<script>
import { FoxApp } from './index.ts'

export default {
    async created() {
        let func = async () => true
        await func()
        // 获取 fox
        let fox = this.$fox
        // 安装fox app
        FoxApp.install(fox)
    }
}
</script>

<style scoped>
.link-items {
    padding: 10px;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}

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