//$router的兩個(gè)API
this.$router.push({
   name:'xiangqing',
   	params:{
   		id:xxx,
   		title:xxx
   	}
})
this.$router.replace({
   name:'xiangqing',
   	params:{
   		id:xxx,
   		title:xxx
   	}
})
this.$router.forward() //前進(jìn)
this.$router.back() //后退
this.$router.go() //可前進(jìn)也可后退

<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

<template>
  <ul>
    <li :style="{opacity}">歡迎學(xué)習(xí)Vue</li>
    <li v-for="p in messageList" :key="p.id">{{p.title}} <input type="text"></li>
  </ul>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "News",
  props:['id','title'],
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
      opacity:1
    };
  },
  activated() {
  			// 開啟一個(gè)定時(shí)器，調(diào)整組件透明度
			console.log('News組件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
  deactivated() {
  	  //關(guān)閉定時(shí)器
      console.log('News組件失活了')
      clearInterval(this.timer)
  },
};
</script>
<style>
</style>

//全局前置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
		if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則
			next() //放行
		}else{
			alert('暫無(wú)權(quán)限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})
//全局后置守衛(wèi)：初始化時(shí)執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改網(wǎng)頁(yè)的title
	}else{
		document.title = 'vue_test'
	}
})

{
    name:"aboutroot",
    path:"/about",
    component:About,
    meta:{
        isTrue:true
    }
},

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暫無(wú)權(quán)限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

{
    name:"aboutroot",
    path:"/about",
    component:About,
    meta:{
        isTrue:true
        title:"About組件"
    }
},

router.afterEach((to,from)=>{
    console.log(to,from)
    document.title=to.meta.title || "默認(rèn)頁(yè)簽"
})

//進(jìn)入守衛(wèi)：通過(guò)路由規(guī)則，進(jìn)入該組件時(shí)被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi)：通過(guò)路由規(guī)則，離開該組件時(shí)被調(diào)用
beforeRouteLeave (to, from, next) {
}

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>我是About的內(nèi)容</h2>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "About",
  beforeRouteEnter(to,from,next){
    // alert("想要進(jìn)入組件！")
    if(to.meta.isTrue){
      if(localStorage.getItem("school")==="nylg"){
        next()
      }else{
        alert("您無(wú)權(quán)進(jìn)入！")
      }
    }else{
      alert("組件不允許進(jìn)入！")
    }
  },
  //通過(guò)路由規(guī)則，離開該組件時(shí)被調(diào)用
  beforeRouteLeave (to, from, next) {
    console.log('About--beforeRouteLeave',to,from)
    next()
  }
};
</script>
<style>
</style>