vue h5 頁面標題,頁面數據緩存問題

問題描述:
每個頁面的title更改
路由:
h5部分頁面不需要數據緩存
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);


const myComponents = {
    Login: r => require.ensure([], () => r(require("@/views/login/Login")), 'com-login'),
    Home: r => require.ensure([], () => r(require("@/views/home/Home")), 'com-home'),
    Index: r => require.ensure([], () => r(require("@/views/home/Index")), 'com-index'),
    Advance: r => require.ensure([], () => r(require("@/views/home/advance")), 'com-advance'),
    Search: r => require.ensure([], () => r(require("@/views/search/Search")), 'com-search'),
    Demands: r => require.ensure([], () => r(require("@/views/demand/Demands")), 'com-demands'),
    Manages: r => require.ensure([], () => r(require("@/views/managed/Manages")), 'com-manages'),
    ElectroNic: r => require.ensure([], () => r(require("@/views/electronics/index")), 'com-electronics'),
    Detail: r => require.ensure([], () => r(require("@/views/electronics/Detail")), 'com-Detail'),
    ElectronicSearch: r => require.ensure([], () => r(require("@/views/search/electronicsearch")), 'com-electronicsearch'),
    SignContract: r => require.ensure([], () => r(require("@/views/signcontract/Index")), 'com-index'),
    Information: r => require.ensure([], () => r(require("@/views/signcontract/Information")), 'com-Information'),
    Success: r => require.ensure([], () => r(require("@/views/signcontract/Success")), 'com-Success'),
};

export default new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: myComponents.Login,
            beforeEnter: function (to, from, next) {
                document.title = "登錄";
                next();
            }
        },
        {
            path: '/home',
            name: 'home',
            component: myComponents.Home,
            redirect: '/home/index',
            children: [
                {
                    path: '/',
                    name: 'Index',
                    component: myComponents.Index,
                    beforeEnter: function (to, from, next) {
                        document.title = "";
                        next();
                    },

                },
                {
                    path: '/advance',
                    name: 'Advance',
                    component: myComponents.Advance,
                    beforeEnter: function (to, from, next) {
                        document.title = "";
                        next();
                    }
                }
            ]
        },
        {
            path: '/search',
            name: 'search',
            component: myComponents.Search,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            }
        },
        {
            path: '/demands',
            name: 'demands',
            component: myComponents.Demands,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            }
        }, {
            path: '/manages',
            name: 'manages',
            component: myComponents.Manages,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            }
        },
        {
            path: '/electronic',
            name: 'ElectroNic',
            component: myComponents.ElectroNic,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },
        {
            path: '/detail',
            name: 'Detail',
            component: myComponents.Detail,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },
        {
            path: '/electronicsearch',
            name: 'electronicsearch',
            component: myComponents.ElectronicSearch,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },
        {
            path: '/signcontract',
            name: 'signcontract',
            component: myComponents.SignContract,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },
        {
            path: '/information',
            name: 'Information',
            component: myComponents.Information,
            beforeEnter: function (to, from, next) {
                document.title = "";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },
        {
            path: '/success',
            name: 'Success',
            component: myComponents.Success,
            beforeEnter: function (to, from, next) {
                document.title = "電子合同";
                next();
            },
            meta: {
                keepAlive: false, //此組件不需要被緩存
            }
        },

        {
            path: '*',
            redirect: '/home'
        }
    ]
})

頁面:

<template>
    <div id="app">
        <!--        <keep-alive>-->
        <!--            <router-view/>-->
        <!--        </keep-alive>-->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive">
                <!-- 這裏是會被緩存的視圖組件,比如 page1,page2 -->
            </router-view>
        </keep-alive>

        <router-view v-if="!$route.meta.keepAlive">
            <!-- 這裏是不被緩存的視圖組件,比如 page3 -->
        </router-view>

        <!--<keep-alive v-if="isWX">-->
        <!--<router-view/>-->
        <!--</keep-alive>-->
        <!--<div class="out-of-wx" v-else>-->
        <!--<img src="https://cdn.julanling.com/h5/saas_wx/wx-icon.png">-->
        <!--<div class="wx-tips">暫不支持當前使用環境<br/>請在微信中打開使用</div>-->
        <!--</div>-->
    </div>
</template>

主要通過router的meta屬性進行判斷。記錄一下

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章