vue router + vue生命周期

路由 router

vueJs的路由，Vue Router，它是VueJs 官方的路由管理器

router-view，在概念上，它是一个容器，用来显示router对象中所设置的路由中的组件。

在vueJs当中，链接跳转，使用 跳转页面

/*App.vue*/ 
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
/*  main.js */
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
/* router/index.js */
import Vue from 'vue'
import Router from 'vue-router'
import mainWrap from '@/components/mainWrap'
import list from '@/components/list'
import about from '@/components/about'
import page1 from '@/components/page/page1'
import page2 from '@/components/page/page2'
import page3 from '@/components/page/page3'
Vue.use(Router)
export default new Router({
	routes: [
		{	
			path: '/',
			name: 'mainWrap',
			component: mainWrap 
		},
		{
			path: '/list',
			name: 'list',
			component: list,
			// children，当前的子路由 
			children:[
				{	
					path: '/page1',
					component: page1 
				},{	
					path: '/page2',
					component: page2 
				},{	
					path: '/page3',
					component: page3 
				}
			]
		},{	
			path: '/about',
			name: 'about',
			component: about 
		}
	]
})
/* MainWrap.vue*/
<template>
	<div>
		<h1> {{msg}} </h1>
		<p><router-link to='/list'>跳转到list页面</router-link></p>
		<p><router-link to='/about'>跳转到 about 页面</router-link></p>
	</div>
</template>
<script>
export default{
	name:'mainWrap',
	data(){
		return {
			msg:'路由-demo-首页'
		}
	}
}
</script>
/* conponents/list.vue*/
<template>
	<div>
		<h1> {{msg}} </h1>
		<p><router-link to='/page1'>页面1111</router-link></p>
		<p><router-link to='/page2'>页面222</router-link></p>
		<p><router-link to='/page3'>页面333</router-link></p>
		<router-view />
	</div>
</template>
<script>
export default{
	name:'list',
	data(){
		return {
			msg:'list页面-二级页'
		}
	}
}
</script>
/* conponents/page/page1*/
<template>
	<div>
		<h1> {{msg}} </h1>
		<p><router-link to='/'>回到首页</router-link></p>
	</div>
</template>
<script>
export default{
	name:'page1',
	data(){
		return {
			msg:'page1111页面的内容-第3级页'
		}
	}
}
</script>

vue router 路由守卫(导航守卫)

​ to 要进入的目标对象

​ from 当前导航要离开的路由

​ next 函数（fn）必须执行的

一、全局路由

​ 1.全局前置守卫 beforeEach

​ 2.全局后置钩子 afterEach

二、路由独享的守卫

​ 写在当前路由的组件中 beforeEnter

三、写在组件内部的

​ 进入组件之前 beforeRouteEnter

​ 组件被复用时 beforeRouteUpdate

​ 离开组件之后 beforeRouteLeave

/* router.index.js*/
import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import a_11 from '../components/a_11.vue'
import a_22 from '../components/a_22.vue'
import a_33 from '../components/a_33.vue'
Vue.use(VueRouter)
// 配置
const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },{
    path: '/a_11',
    name: 'a_11',
    component: a_11
  },{
    path: '/a_22',
    name: 'a_22',
    component: a_22,
    beforeEnter:(to,from,next)=>{
      // console.log('路由独享的守卫：' + to.name)
      next()
    }
  },{
    path: '/a_33',
    name: 'a_33',
    component: a_33
  }
]
// 注册全局前置守卫
const router = new VueRouter({
  routes
})
// 全局前置守卫，页面刚加载，就执行
router.beforeEach((to, form, next)=>{
  let _token = localStorage.getItem('token');
  if( _token === '' ){
    next()
    // console.log('xxxxx')
  } else if( _token === '111' ){
      next()
      next('/a_11')
  } else if( _token === '222' ){
      next()
      next('/a_22')
  }
})
// 全局后置钩子，它没有next
router.afterEach( (to,from)=>{
  console.log( '成功跳转到：' + to.name )
});
export default router

/* components/HelloWorld.vue */
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input @click='saveInfo11' type='button' value='保存-111' />
    <input @click='saveInfo22' type='button' value='保存-222' />
    <input @click='goto33' type='button' value='去33' />
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:'vue router 的路由守卫 demo'
    }
  },
  methods:{
    saveInfo11(){
      localStorage.setItem('token','111');
    },
    saveInfo22(){
      localStorage.setItem('token','222');
    },
    goto33(){
      this.$router.push('/a_33')
    }
  }
}
</script>
/* a_111.vue*/
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input @click='gotoIndex' type='button' value='回首页' />
  </div>
</template>
<script>
export default {
  name: 'a_11',
  data(){
    return{
      msg:'a_11页面'
    }
  },
  created(){
      localStorage.setItem('token','');
  },
  methods:{
    gotoIndex(){
      this.$router.push('/')
    }
  }
}
</script>

/* a_333.vue*/
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input @click='gotoIndex' type='button' value='回首页' />
    <router-link :to="{path:'/a_33',query: { userId: 1111}}">跳转1</router-link>
    <router-link :to="{path:'/a_33',query: { userId: 222}}">跳转1</router-link>
    <router-link :to="{path:'/a_33',query: { userId: 333}}">跳转1</router-link>
  </div>
</template>
<script>
export default {
  name: 'a_33',
  data(){
    return{
      msg:'a_33页面'
    }
  },
  // 进入组件之前
  beforeRouteEnter(to, from, next){
    console.log( this );//此时this为空，因为组件还没有实例化
    next( vm=>{
      console.log( vm.msg );//vm是通过回调来获得当前组件的实例
    })
  },
  // 组件被复用时触发，即，调用同一个页面，参数不同
  beforeRouteUpdate(to, from, next){
    console.log( to.query );
    next()
  },
  // 离开组件时触发
  beforeRouteLeave(to, from, next){
    if( confirm('要离开吗？') === true){
      next()
    }
  },
  methods:{
    gotoIndex(){
      this.$router.push('/')
    }
  }
}
</script>

vue生命周期

从Vue的实例的创建、运行、到销毁的整个过程中，会发生的各种事件，这些事件，就被称为vue的生命周期。

生命周期钩子，这其实就是生命周期的事件的别名而已。

生命周期钩子 = 生命周期函数 = 生命周期事件

一、创建期间；
beforeCreate，
实例刚在内存中被创建出来；
此时，data、methods还没有初始化；

​ created:
​ 实例已经在内存中创建ok了；
​ data、methods已经ok，但是还没有编译模板

​ beforeMount:已经完成了模板(就是template)的编译，但是，还没有被挂到页面中；

​ mounted:模板已经ok，挂载到页面上了；

二、运行期间；
beforeUpdate:
状态更新之前调用此函数，这时data中的状态值是最新的；
但是界面上的数据还是旧的，因为还没有重新开始渲染dom节点。

​ updated:
​ 实例更新完毕之后调用此函数，
​ 这时data里的状态值和界面上显示的数据，是一样的，
​ 界面（视图）已经被 重新渲染好了。

三、销毁期间；
beforeDestroy：实例在被销毁之前调用，在这一步实例仍然是可用的；

​ destroyed:
​ vue实例销毁之后 调用，
​ 调用之后，
​ Vue实例的所有东西都会被解除绑定，
​ 所有事件监听器都会被移除，所有子实例都被销毁。

<script>
// 创建一个vue实例，
new Vue({
	el:'#app',
	data:{
		msg:'11111'
	},
	methods:{
		fnxx(){
			console.log('fnxx方法，被 执行了');
		}
	},
	beforeCreate(){
		// 实例刚在内存中被创建出来；data、methods还没有初始化；
		console.log( this.msg );
		 this.fnxx()
	},
	created(){
		// 实例已经在内存中创建ok了； data、methods已经ok
		 console.log( this.msg );
		 this.fnxx()
	},
	beforeMount(){
		// 已经完成了模板(就是template)的编译，但是，还没有被挂到页面中；
		console.log( document.getElementById('h3_id').innerHTML );
		// 这时，你得到的是一些模板字符串，真正的内容，还没有被替换过来
	},
	mounted(){
		// 模板已经ok，挂载到页面dom上了；
		 console.log( document.getElementById('h3_id').innerText );
		// 到这一步，整个vue实例已经创建完成。
	},
	beforeUpdate(){
		//  页面更新之前调用，到这一步，页面还没有更新
		// 页面的值是旧的；
		console.log( document.getElementById('h3_id').innerText );
		// data的值是新的；
		 console.log( this.msg );
	},
	updated(){
		// 页面更新完了之后，调用这个函数
		// data和界面上显示的数据，是一样的，
		console.log( document.getElementById('h3_id').innerText );
		console.log( this.msg );
	}
})
</script>