vue单页应用,加入分页后,点击到第二页的时候,进入某个详情页,然后点击浏览器后退按钮,并没有返回到第二页,而是返回到了首页,并且刷新了页面,此时用keepAlive解决
备注https://www.cnblogs.com/sysuhanyf/p/7454530.html这个比我写的更详细,我只是保留下我的实际代码,方便以后查阅;import Vue from 'vue';import Router from 'vue-router';import CompanyList from '@/views/Company/List';import Co...
·
备注https://www.cnblogs.com/sysuhanyf/p/7454530.html 这个比我写的更详细,我只是保留下我的实际代码,方便以后查阅;
import Vue from 'vue';
import Router from 'vue-router';
import CompanyList from '@/views/Company/List';
import CompanyDetail from '@/views/Company/Detail';
import ExpertList from '@/views/Expert/List';
import ExpertDetail from '@/views/Expert/Detail';
import ServiceBussiness from '@/views/Service/Bussiness';
import ServiceEngineer from '@/views/Service/Engineer';
import ServiceProduction from '@/views/Service/Production';
import ServiceTechnology from '@/views/Service/Technology';
Vue.use(Router);
const company = {
template: `
<div class="conpany">
<!-- <router-view> --> //原来没有加keepAlive的写法
**<keep-alive color="red">
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>**
</div>
`
};
const expert = {
template: `
<div class="expert">
**<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>**
</div>
`
};
const serviceS = {
template: `
<div class="service">
<router-view/>
</div>
`
};
export default new Router({
routes: [
{
path: '/',
redirect: '/expert/list',
},
{
path: '/company',
component: company,
children: [
{
path: 'list',
name: 'list',
component: CompanyList,
**meta: { // 加了keepAlive后新增的
keepAlive: true
}**
},
{
path: 'detail/:id',
name: 'detail',
component: CompanyDetail
}
]
},
{
path: '/expert',
name: 'expertList',
component: expert,
children: [
{
path: 'list',
name: 'list',
component: ExpertList,
meta: {
keepAlive: true
}
},
{
path: 'detail/:id',
name: 'expertDetail',
component: ExpertDetail
}
]
},
{
path: '/service',
component: serviceS,
children: [
{
path: 'bussiness',
name: 'list',
component: ServiceBussiness
},
{
path: 'engineer',
name: 'engineer',
component: ServiceEngineer
},
{
path: 'production',
name: 'production',
component: ServiceProduction
},
{
path: 'technology',
name: 'technology',
component: ServiceTechnology
}
]
}
]
});
给列表加了keepAlive ,这样点击某一页的时候,进入详情页,按后退按钮,返回的是该页
更多推荐
已为社区贡献7条内容
所有评论(0)