快速掌握Vue Router使用方法

//$router的两个API
this.$router.push({
   name:'xiangqing',
   	params:{
   		id:xxx,
   		title:xxx
   	}
})
this.$router.replace({
   name:'xiangqing',
   	params:{
   		id:xxx,
   		title:xxx
   	}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

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

<template>
  <ul>
    <li :style="{opacity}">欢迎学习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() {
  			// 开启一个定时器，调整组件透明度
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
  deactivated() {
  	  //关闭定时器
      console.log('News组件失活了')
      clearInterval(this.timer)
  },
};
</script>
<style>
</style>

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的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){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// 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 || "默认页签"
})

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

<template>
  <div class="col-xs-6">
    <div class="panel">
      <div class="panel-body">
        <h2>我是About的内容</h2>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "About",
  beforeRouteEnter(to,from,next){
    // alert("想要进入组件！")
    if(to.meta.isTrue){
      if(localStorage.getItem("school")==="nylg"){
        next()
      }else{
        alert("您无权进入！")
      }
    }else{
      alert("组件不允许进入！")
    }
  },
  //通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log('About--beforeRouteLeave',to,from)
    next()
  }
};
</script>
<style>
</style>