問題描述:
每個頁面的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屬性進行判斷。記錄一下