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": "橙子"
    }]
  }
}

四、调用页面如下

 

五、路由文件的配置

设置：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:'/'
    }
  ]
})