vue学习总结一：keep-alive用法及（activated,deactivated生命周期）

		activated(){
			console.log('activated页面打开时触发');
		},
		deactivated(){
			console.log('deactivated页面关闭时触发');
		}

 

axios获取本地文件配置步骤

一、修改config文件夹下面index.js文件配置

    proxyTable: {
        '/api':{
            target:'http://localhost:8081',
            pathRewrite:{//改写路径
                '^/api':'/static/mock'
            }
        }
    },

二、使用vue官方推荐的axios插件，执行npm install axios命令

 三、准备好静态json文件（在static的mock文件夹下）

//static-->mock-->index.json
 
{
  "ret": true,
  "data": {
    "list": [{
        "id": "1",
        "name": "苹果",
        "detail":""
      },{
        "id": "2",
        "name": "香蕉"
      },{
        "id": "3",
        "name": "梨子"
      },{
        "id": "4",
        "name": "葡萄"
      },{
      "id": "5",
      "name": "哈密瓜"
    },{
      "id": "6",
      "name": "西瓜"
    },{
      "id": "7",
      "name": "橙子"
    }]
  }
}

四、调用页面如下

<template>
    <div id="app">
        <!-- <img src="./assets/logo.png"> -->
     	<ul>
            <li><router-link to='/'>helloworld</router-link><li>
            <li><router-link to='/echart'>echart</router-link><li>
            <li><router-link to='/map'>map</router-link></li>
        </ul>
        
        <!-- <router-view></router-view> -->

        <!-- 方法一：缓存所有的 -->
        <keep-alive>
            <router-view/>
        </keep-alive>

        <!-- 方法二 -->
        <!-- 缓存模块名为List的模块，不会重复请求，其它模块重复请求 -->
        <!-- <keep-alive include="List">
            <router-view/>
        </keep-alive> -->
        <!-- 不缓存模块名为List的模块，会重复请求，其它模块缓存 -->
        <!-- <keep-alive exclude="List">
            <router-view/>
        </keep-alive> -->

        <!-- 方法三 -->
        <!--  <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view> -->
  	</div>
</template>

<script>
    export default {
        name: 'App'
    }
</script>
<style scoped>
	ul{
		height: 50px;
	}
	li{
		float: left;
		margin-left:15px;
		list-style: none;
	}
</style>

 <style scoped>
     ul{
        list-style: none;
     }
     ul.two li{
        float: left;
        width: 200px;
        border:solid red 1px;
        height: 40px;
     }
     .act{
        background: blue;
        color:white;
     }
 </style>
<template>
    <div>
        <ul class="list-page">
            <li v-for="item in list" :key="item.id" :id="item.id" @click="goDetail">{{item.name}}</li>
        </ul>

        <ul class="two">
            <li><router-link active-class="act" to="/childone">one</router-link></li>
            <li><router-link active-class="act" to="/childtwo">two</router-link></li>
            <li><router-link active-class="act" to="/childthree">three</router-link></li>
        </ul>
        <div>
            <keep-alive>
                <router-view></router-view>
                
            </keep-alive>
        </div>
    
    </div>

    
</template>
 
<script>
  import axios from 'axios'
  export default {
    name: 'List',
    data(){
      return {
       list:[]
      }
    },
    mounted(){
     this.getData();//调用获取数据函数
    },
    methods:{
      //定义页面跳转函数
        goDetail(e){
            console.log(e);
            debugger;
            const id=e.currentTarget.getAttribute("id");
            const name=e.currentTarget.innerText;
            this.$router.push({
                path:'map',
                query:{id:id, name:name}
        })
      },
      //定义获取数据函数
      getData(){
         axios.get('/api/index.json').then((res)=>{
              if(res.status==200){
                this.list=res.data.data.list;
              }
         }).catch((error)=>{
             console.log(error);
         })
      }
    }
  }
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .list-page{
        font-size:0.26rem;
    }
    
    li{
        height:0.7rem;
        line-height:0.7rem;
        background-color :white;
        border-bottom :1px solid #ececec;
        padding-left:0.2rem ;
    }
     
 
</style>

 

五、路由文件的配置

设置：meta:{keepAlive:true},//true缓存/false不缓存

 

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import echarta from '@/components/echarts1.vue'
import mapa from '@/components/map.vue'

import childone from '@/components/components/childOne'
import childtwo from '@/components/components/childTwo'
import childthree from '@/components/components/childThree'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [

    {
      	path: '/',
      	name: 'HelloWorldVue',
      	component: HelloWorld,
        meta:{keepAlive:true},//需要被缓存
        redirect:'/childone',
        children:[
          {
            path:'/childone',
            name:'childone',
            component:childone
          },
          {
            path:'/childtwo',
            name:'childtwo',
            component:childtwo
          },
          {
            path:'/childthree',
            name:'childthree',
            component:childthree
          },
        ]
    },
    {
      	path: '/echart',
      	name: 'echartVue',
      	component: echarta
    },
	  {
      	path: '/map',
      	name: 'mapVue',
      	component: mapa,
        meta:{keepAlive:false}//不需要被缓存
    },{
      path:'*',
      redirect:'/'
    }
  ]
})