Fox 2.0 Router 视图-局部更新

局部更新（推荐）

无可否认，最适合fox router还是局部更新。首先fox-router-view需要设置name（保证唯一性），通过rouer的to/open/append等方法中的root参数，指定page加载到指定的fox-router-view下面。

例子

例子代码：sites/example/pages/program-navigate-part

例子说明：在index.js中进行路由注册，而index.vue是页面上最上层路由，没设置name，默认为name=default，在panel.vue中定义fox-router-view的name=_sub_root_view，通过在router.to方法中设置root，从而让页面精确得更新指定位置

API

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

参数A（route路由对象）

fox.router.push(route)

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

参数B(参数列表):

fox.router.push(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 about from './components/about.vue'

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

// 路由表
let routes = [
    {
        path: '/',
        redirect: '/panel'
    },
    {
        path: '/panel',
        component: panel
    },
    {
        path: '/home',
        component: home
    },
    {
        path: '/about',
        component: about
    }
]
export let FoxApp = {
    /** *
     * 安装
     */
    install(fox: any) {
        // 设置404页面
        fox.router.setNotFoundRoute({
            path: '/notFound',
            component: notFound
        })
        // 加入路由
        fox.router.addRoutes(routes)
    }
}

index.vue(top路由演示)

<template>
  <div>
    <div>
        <button class="my-button" @click="toPanel">go panel</button>
     </div>
     <div class="my-router-view-div">
        <fox-router-view></fox-router-view>
      </div>
  </div>
</template>
<script>


import { FoxApp } from './index.ts'

export default {
  created(){
    //安装fox app
    FoxApp.install(this.$fox)
  },
  methods:{
    toPanel(){
      this.$router.push('/panel')
    }
  }
}
</script>

<style>
.fox-card-views {
  padding: 0px 0x 0px 0px;
}

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

.fox-card-view-trans-enter {
}

.fox-card-view-trans-enter-active {
  animation: fox-card-view-in-slide-right 330ms;
  -webkit-animation: fox-card-view-in-slide-right 330ms;
  z-index: 120;
}

.fox-card-view-trans-enter-to {
}

/* 进场动画 */
@-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%);
  }
}
</style>

panel.vue(子路由演示)

<template>
    <div>
        <div>主面版</div>
        <div>
            <button class="my-button" @click="toHome">go home</button>
            <button class="my-button" @click="toAbout">go about</button>
        </div>
        <div>
            <input type="text" />
        </div>
        <div>
            <fox-router-view name="_sub_root_view" :multi="false"></fox-router-view>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        toHome() {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            this.$router.push('/home', { target: 'home' }, '_sub_root_view')
        },

        toAbout() {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            this.$router.push('/about', { target: 'about' }, '_sub_root_view')
        }
    },
    mounted() {
        console.info('>>>>> on mounted(panel)')
    },
    beforeDestroy() {
        console.info('----- on unmounted(panel)')
    }
}
</script>