h5頁面在內嵌在app裡使用，頁面切換時體驗不太友好，可以使用transition設定動畫，頁面前進和後退時保持和原生客戶端一樣的切換效果：
1、在路由裡設定，meta的index的值，通過index值的大小控制頁面跳轉層級順序，如下：首頁 => 產品 => 詳情

export default new Router({
    routes: [
        {
            path: '/index',
            name: 'index',
            component: index,
            meta:{
                title:'首頁'
 
,
                index:1
            }
        },
        {
            path: '/list',
            name: 'list',
            component: list,
            meta:{
                title:'產品',
                index:2
            }
        },
        {
            path: '/detail',
            name: 'detail'
 
,
            component: detail,
            meta:{
                title:'詳情',
                index:3
            }
        }]
})

2.在app.vue檔案里加上transition動畫效果

<template>
    <div id="app" :class="[isIos ? 'xn-ios':'']">
        <transition :name="transitionName">
            <keep-alive
 
><router-view /></keep-alive>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data(){
            return {
                isIos:false,
                transitionName:''
            }
        },
        create(){
        },
        mounted(){
            this.getDevice();

        },
        methods: {
            getDevice(){
                if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
                    this.isIos = true;
                }
            }
        },
        watch: {//使用watch 監聽$router的變化
            $route(to, from) {
                //如果to的索引值為0，不新增任何動畫；如果to索引大於from索引,判斷為前進狀態,反之則為後退狀態
                if(to.meta.index > 0){
                    if( to.meta.index < from.meta.index){
                        this.transitionName = 'slide-right';
                    }else{
                        this.transitionName = 'slide-left';
                    }
                }else if(to.meta.index == 0 && from.meta.index > 0){
                    this.transitionName = 'slide-right';
                }

                //當然，如果你沒有需要設定索引值為0的頁面可以直接用著一段
                /*if( to.meta.index < from.meta.index){
                      this.transitionName = 'slide-right';
                }else{
                      this.transitionName = 'slide-left';
                }*/
            }
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
        font-family: arial;
        color: #333;
        -webkit-user-select: none;
    }

    html {
        font-family: arail;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        line-height: 1;
        font-size: 20px;
        height:100%;
        overflow-x: hidden;
    }
    body{
        position: relative;
        overflow-x: hidden;
        background: #f0f2f5;
        min-height:100%;
        display: flex;
        flex-direction: column;
    }
    #app{
        display: flex;
        flex:1;
        flex-direction: column;
        background: #f0f2f5;
    }
    img {
        display: block;
    }
    ul,ol{
        list-style: none;
    }
    a{
        text-decoration: none;
        outline: none;
    }
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
        will-change: transform;
        transition: all .3s;
        position: absolute;
        width:100%;
        left:0;
    }
    .slide-right-enter {
        transform: translateX(-100%);
    }
    .slide-right-leave-active {
        transform: translateX(100%);
    }
    .slide-left-enter {
        transform: translateX(100%);
    }
    .slide-left-leave-active {
        transform: translateX(-100%);
    }
</style>

說明：我專案裡有的頁面，是一個單獨的頁面，並不是從某個H5路由跳過來，也不需要跳轉到其他H5頁面上去，這樣的頁面不需要動畫，因為我的app裡，webview開啟H5頁面時就已經具備動畫效果了，所以，我把app開啟的第一個H5的index都設定為0，後面這個頁面如果要跳到其他頁面，只需要將其他頁面的index值設定為大於0就好了