vue3根据路由的变化导航栏内容改变

iiiilooaixuud

已于 2022-09-14 11:41:18 修改

阅读量1k

点赞数

分类专栏： vue 页面遇到的基础问题文章标签：前端 javascript 网络

于 2022-09-14 11:39:14 首次发布

本文链接：https://blog.csdn.net/qq_46617584/article/details/126849515

版权

页面遇到的基础问题同时被 2 个专栏收录

101 篇文章 3 订阅

订阅专栏

vue

91 篇文章 1 订阅

订阅专栏

本文介绍了在 Vue3 中如何监听路由变化并根据路由更新数据。通过使用 watch 方法监听 `router.currentRoute.value.path`，在路由变化时执行相应操作，如在进入或离开特定路由时更改导航菜单。另外，还提到了使用 onBeforeRouteUpdate 路由守卫进行路由更新前的处理。这种方法对于实现动态页面内容和导航同步非常有用。

摘要由CSDN通过智能技术生成

有时在页面刷新或者返回等操作时，想监听路由变化进行数据更新等操作。那么在vue3中怎么对路由进行监听呢？这里为大家提供了这两种方法：

效果：

watch监听

 const barNav=ref([])
 const navMainList = ref([
       {
        name: "首页",
        id: 1,
        path:"/AchievementsIndex",
        
      },
      {
        name: "成果转化",
        id: 2,
        path:"/AchieveMents",
        child:[
          {
            name: "发布需求",
             id: 2-1,
             path:"/AchieveMents"
          },
          {
             name: "发布成果",
             id: 2-2,
             path:"/AchieveMents"
          },
          {
            name: "需求检索",
             id: 2-3,
             path:"/AchieveMents"
          },
          {
            name: "成果检索",
             id: 2-4,
             path:"/AchieveMents"
          }
        ]
      },
      {
        name: "专利转让",
        id: 3,
        path:"/patented",
        child:[
          {
            name: "专利发布",
             id: 3-1,
             path:"/AchieveMents"
          },
          {
            name: "专利筛选",
             id: 3-2,
             path:"/AchieveMents"
          },
          {
            name: "转让指南",
             id: 3-3,
             path:"/patentedGuide"
          }
        ]
      },
      {
        name: "互动交流",
        id: 4,
        path:"/InteractiveCommunication",
      },
      {
        name: "专家资源库",
        id: 5,
        path:"/expertResourct",
      },
      {
        name: "新闻中心",
        id: 6,
        path:"/newsCenter",
        child:[
          {
            name: "政策法规",
             id: 6-1,
             path:"/AchieveMents"
          },
          {
            name: "新闻资讯",
             id: 6-2,
             path:"/newsDetail"
          },
          {
            name: "通知公告",
             id: 6-3,
             path:"/AchieveMents"
          }
        ]
      },
      {
        name: "中心介绍",
        id: 7,
        path:"/PromotionCenter",
      },
    ]);
   const navMainListNew = ref([
       {
        name: "首页",
        id: 1,
        path:"/AchievementsIndex",
        
      },
      {
        name: "成果转化",
        id: 2,
        path:"/AchieveMents",
        child:[
          {
            name: "发布需求",
             id: 2-1,
             path:"/AchieveMents"
          },
          {
             name: "发布成果",
             id: 2-2,
             path:"/AchieveMents"
          },
          {
            name: "需求检索",
             id: 2-3,
             path:"/AchieveMents"
          },
          {
            name: "成果检索",
             id: 2-4,
             path:"/AchieveMents"
          }
        ]
      },
      {
        name: "专利转让",
        id: 3,
        path:"/patented",
        child:[
          {
            name: "专利发布",
             id: 3-1,
             path:"/AchieveMents"
          },
          {
            name: "专利筛选",
             id: 3-2,
             path:"/AchieveMents"
          },
          {
            name: "转让指南",
             id: 3-3,
             path:"/patentedGuide"
          }
        ]
      },
    ]);


 onMounted(()=>{
      
      barNav.value=navMainList.value
    
    })

 watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
          if (newValue == "/askQuestions") {
          barNav.value=navMainListNew.value
        }
          if (oldValue == "/askQuestions") {
          barNav.value=navMainList.value
        }
       },{ immediate: true })

（思路：首先页面导航绑定一个空的导航数组，然后mounted阶段直接把一个数组赋值给这个空的barNav，然后监听路由的改变，当进入askQuestion路由的时候，把新的导航赋值给barNav，当离开这个路由的时候，把之前的那个数组再次赋值给barNav）

onBeforeRouteUpdate路由守卫

import { useRouter,onBeforeRouteUpdate } from 'vue-router';

let router = useRouter()
onBeforeRouteUpdate((to) => {
        // console.log('onBeforeRouteUpdate',to.path);     
 });