vue使用keep-alive实现从详情页返回时不刷新,从其他页面进入时刷新页面
activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在
//App.vue
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
<TabBar v-if="$route.meta.isTabar"></TabBar>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<TabBar v-if="$route.meta.isTabar"></TabBar>
</div>
</template>
<script>
import TabBar from '@/components/TabBar'
export default {
name: 'App',
components: {
TabBar
}
}
</script>
<style lang="less"></style>
index.js
// 这个文件就是封装的路由模块
// 1.引入vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入路由所映射的组件
import Index from '@/pages/Index.vue'
import Details from '@/pages/details'
import firstPage from '@/pages/firstPage'
// 挂载:让Vue使用VueRouter进行路由管理
Vue.use(VueRouter)
// 2.创建路由对象
var router = new VueRouter({
routes: [
{
name: 'firstPage',
// path: '/Index',
path: '/',
component: firstPage,
meta: {
isTabar: true
}
},
{
name: 'Index',
// path: '/Index',
path: '/Index',
component: Index,
meta: {
keepAlive: true,
isTabar: true
}
},
{
name: 'Details',
// path: '/Index',
path: '/details',
component: Details,
meta: {
isTabar: false
}
}
]
})
// 暴露
export default router
firstPage页的代码
<template>
<button @click="toIndex">进入首页</button>
</template>
<script>
export default {
methods: {
toIndex () {
this.$router.push({
path: 'Index'
})
}
}
}
</script>
<style>
</style>
首页界面的代码
在activated中判断是否需要刷新数据
<template>
<!--首页界面-->
<!--index.wxml-->
<div class="main_pages">
<button @click="toBack">返回</button>
<!-- 职位 -->
<div class="job">
<div
class="job_item"
v-for="(item, index) in smallList"
:key="index"
@click="toDetails"
>
{{ index }}
</div>
</div>
<button @click="addmore" style="margin-bottom:60px">增加</button>
</div>
</template>
<script>
import api from '../utils/api'
import util from '../utils/util'
let isFromDetails = false
export default {
data () {
return {
smallList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
tagList: [1, 2, 5, 6, 7],
numPage: 1
}
},
beforeRouteEnter (to, from, next) {
if (from.name !== 'Details') {
isFromDetails = false
} else {
isFromDetails = true
}
next(vm => {})
},
mounted () {
},
activated () {
console.log(this.$route.query.isload, 'this.$route.query.isload')
if (!isFromDetails || this.$route.query.isload) {
console.log(isFromDetails, 'activated')
console.log('触发请求')
console.log(this.numPage, 'this.data.activated')
this.smallList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
this.tagList = [1, 2, 5, 6, 7]
} else {
console.log(isFromDetails, 'activated')
console.log('不触发请求')
console.log(this.numPage, 'this.data.activated')
}
},
methods: {
toBack () {
this.$router.back(-1)
},
toDetails () {
this.numPage = 5
console.log(this.numPage, 'this.data.numPage')
this.$router.push({
path: 'Details',
query: {
numPage: this.numPage
}
})
},
addmore () {
this.smallList.push(9)
console.log(this.smallList, 'this.small')
}
}
// }
}
</script>
<style lang="less" scoped>
.main_pages {
background: #f6f6f6;
}
// 轮播图
.swiper {
position: relative;
width: 100%;
height: 200px;
image {
width: 100%;
height: 100%;
}
}
// 搜索
.bar_box {
position: absolute;
top: 8px;
width: 100%;
display: flex;
align-items: center;
// padding: 10rpx 0;
.bar_box_left {
width: 67px;
height: 22px;
background: rgba(13, 170, 191, 0.3);
border-radius: 11px;
// background: red;
font-size: 10px;
font-weight: 500;
color: #fff;
line-height: 22px;
text-align: center;
margin-left: 10px;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; //截取第三行
overflow: hidden;
}
.dingwei {
width: 6px;
height: 9px;
margin-right: 3px;
margin-left: 8px;
// vertical-align: top;
}
}
.bar_box > div:nth-child(2) {
margin-right: 15px;
font-size: 14px;
}
// 职位
.job {
background: #f6f6f6;
}
.job_item {
width: 100%;
background: #fff;
margin-bottom: 4px;
// height: 296rpx;
padding: 20px 20px 17px 20px;
box-sizing: border-box;
.header {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: #222222;
height: 28px;
.header_right {
color: #0daabf;
}
}
.condition {
display: flex;
font-size: 10px;
color: #434343;
margin-bottom: 17px;
.time {
margin-left: 4px;
margin-right: 4px;
}
}
.tag {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
}
.tag_item {
text-align: center;
min-width: 52px;
color: #888888;
font-size: 10px;
padding: 2px 5px;
background: #fafafa;
border-radius: 1px;
margin-right: 4px;
}
.userInfo {
height: 20px;
line-height: 20px;
display: flex;
font-size: 10px;
color: #434343;
image {
width: 10px;
height: 10px;
border-radius: 999px;
margin-right: 5px;
}
.address {
color: #888888;
margin-left: auto;
margin-right: 2px;
}
}
}
</style>
详情页,带参数时代表需要更新数据,不带参数代表不更新数据
<template>
<!--pages/JobDetails/JobDetails.wxml-->
<div class="main_pages">
<button @click="toBack">返回</button>
<button @click="toBackOne">返回带参数</button>
<div class="header">
<div class="header_title">
详情页
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
},
methods: {
toBackOne () {
this.$router.push({
path: '/Index',
query: {
isload: true
}
})
},
toBack () {
// this.$router.go(-1)
this.$router.back(-1)
}
}
}
</script>
<style></style>