Vue2/3路由缓存、-路由监听、-常见路由守卫

路由缓存、路由监听、常见路由守卫—笔记 :

什么是路由缓存?-----------
路由缓存 —当路由只有参数变化时,会复用组件实例

存在什么问题?------------
复用导致生命周期不执行,onMounted不执行,新请求无法发送

当出现路由缓存问题,两种方式解决

• 1. 添加key —不在意性能问题，选择key,简单粗暴

• 2. 监听路由变化,钩子函数 —在意性能问题，选择onBeforeRouteUpdate,精细化控制

Vue3–路由缓存解决

   方式一.// 添加key 强制销数   ---注意是在路由视口位置
	<Routerview :key="$route.fullPath"/>
	
   方式二.// 监听路由变化--(onBeforeRouteUpdate)---钩子函数可以在每次路由更新之前执行
   <script setup>{
     import { onBeforeRouteUpdate } from 'vue-router'
     ......
     onBeforeRouteUpdate((to)=>{
       // to 可以拿到最新的路由参数信息
     console.log('路由更新啦',to)
      // 需要使用最新路由参数请求最新数据
     getData(to.params.id)
    }) 
   }

Vue3监听路由变化

1. watchEffect
   —watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数
2. 可以直接监听router
   —可以使用 router.currentRoute.value
3. 可以使用组件守卫
   —onBeforeRouteUpdate

---

1.watchEffect

<script setup>
	import {ref,watchEffect}from 'vue'
	import {useRoute}from 'vue-router'
	const $route=useRoute()
	watchEffect(()=>{
	if($route.path==='/xxx'){
			....
	}else{
			....
	}
	
	})

</script>

2.router

 <script setup>
	 import { useRouter} from 'vue-router'
	 import { watch } from 'vue'
	 const router=useRouter()
		 watch(
		   () => router.currentRoute.value,
		    //  (newVal, oldVal) => {
		   //   console.log(newVal, 11)
		  //   console.log(oldVal, 22)
		 //   }
		   (to, from) => {
				 console.log(to.path)
				 console.log(from.path)
		   }
		 )
 
 </script>

3.组件守卫

 <script setup>
 	import { onBeforeRouteUpdate,onBeforeRouteLeave } from 'vue-router'
		onBeforeRouteUpdate((to, from) => {
		  console.log(to)
		  console.log(from)
		})
		//离开组件时触发
		onBeforeRouteLeave(()=>{
		console.log('我要离开组件啦~')
		})
</script>

====================================================================

Vue2 监听路由变化的方式

    方式一.// watch 监听
	watch:{
	   $route(to, from) {
	   // to去的那个路劲 ,from从那个路劲来
	      console.log(to.path,from.path)
	    } 
	}
    方式二.// beforeRouteUpdate钩子函数可以在每次路由更新之前执行---直接同created类似的写法
          //组件路由监听
		 beforeRouteUpdate(to, from){
		 //to 可以拿到最新的路由参数信息
		  console.log('路由更新啦')
		  }
		  

--------------------------更多相关知识如下----------------------

常见路由守卫分为:

• 全局守卫:

  • this.$router.beforeEach((to,from,next)=>{ …}), --全局前置

  • this.$router.afterEach((to,from,next)=>{ …}) ----全局后置

• 独享守卫:
  • beforeEnter: (to, from, next) => {… }
• 组件守卫:
  • beforeRouteEnter
  • beforeRouteUpdate (2.2 新增)
  • beforeRouteLeave

---

vue2与vue3不同用法

• 组件守卫: (与v2不同)—组合式写法
  • onBeforeRouteUpdate
  • onBeforeRouteLeave

…

====================================================================

借鉴:https://blog.csdn.net/qq_37600506/article/details/122219051?spm=1001.2014.3001.5506

官网:
https://router.vuejs.org/zh/guide/advanced/navigation-guards.htm

https://router.vuejs.org/zh/guide/advanced/composition-api.html

我欲乘风归去，又恐琼楼玉宇