改写路由的push方法,来实现面包屑功能

src/hooks/useHZRouter.js

@@ -1,4 +1,5 @@
 // 自定义路由钩子
+// 没有使用到 改为重写了router的push方法 详情见utils/interceptRouterMethod.js
 import router from "@/router";
 import store from '@/store'
 
@@ -74,12 +75,9 @@ export const listenRouterBack=()=>{
     if(window.history&&window.history.pushState){{
         $(window).on('popstate',()=>{
             console.log('路由后退');
-            // const path=window.location.pathname
-            // const routesItem=getToRoute(path)
-            // store.commit('setBreadCrumb', routesItem)
-        })
-        $(window).on('pushstate',()=>{
-            console.log('路由改变');
+            const path=window.location.pathname
+            const routesItem=getToRoute(path)
+            store.commit('setBreadCrumb', routesItem)
         })
     }}
 }

src/layout/Index.vue

@@ -37,7 +37,7 @@ import LoginPop from '@/components/LoginPop.vue'
     </el-container>
 
     <!-- 回到顶部 -->
-    <el-backtop :bottom="100" visibility-height="900" style="z-index:1000">
+    <el-backtop :bottom="100" :visibility-height="900" style="z-index:1000">
       <img src="@/assets/icon-back-top.png" alt="" style="width: 60px;">
     </el-backtop>
 

src/main.js

@@ -7,13 +7,7 @@ import 'element-plus/dist/index.css'
 import "@/style/global.scss";//全局样式
 import 'normalize.css'
 import {drag} from  "./directive/drag"
-import {listenRouterBack} from '@/hooks/useHZRouter';
-
-listenRouterBack()// 监听路由后退事件 更新面包屑
-
-
-
-
+import '@/utils/interceptRouterMethod.js' //重写router方法模块
 
 const app = createApp(App)
 app.directive('drag', drag)

src/store/index.js

@@ -129,13 +129,12 @@ export default createStore({
     // 设置面包屑数据
     // 在全局路由钩子中和自定义路由函数中调用
     setBreadCrumb(state,data){
-      console.log('store中设置面包屑',data);
+      // console.log('store中设置面包屑',data);
       // 如果是侧边栏 清除路由栈
       if (data.meta.isRoot) {
         let obj = {
           name: data.meta.title,
-          path:data.path,
-          show:true
+          path:data.path
         }
         state.breadCrumbList=[obj]
       }else{
@@ -147,11 +146,10 @@ export default createStore({
           }
         });
         if (index==-1) {//不存在
-          state.breadCrumbList.push({name:data.meta.title,path:data.path,show:true})
+          state.breadCrumbList.push({name:data.meta.title,path:data.path})
         }else{
-          // const arr=state.breadCrumbList.slice(0,index+1)
-          // state.breadCrumbList=arr
-          state.breadCrumbList.push({name:data.meta.title,path:data.path,show:false})
+          const arr=state.breadCrumbList.slice(0,index+1)
+          state.breadCrumbList=arr
         }
       }
 

src/utils/interceptRouterMethod.js

@@ -0,0 +1,80 @@
+// 在router 方法中加拦截
+
+import router from '@/router'
+import store  from '@/store';
+
+// 找到要跳转到的那个路由信息
+const getToRoute=(path)=>{
+    const allRoutes=router.getRoutes()
+    let routesItem={}
+    allRoutes.forEach(route => {
+        if(route.path===path){
+            routesItem=route
+        }
+    });
+    return routesItem
+}
+
+
+const routerPush=router.push //保存原来的push函数
+
+// 重写push函数
+router.push = function push(location) {
+    // location 可能是string 也可能是obj 完全取决于 你是怎么调push的
+    console.log('push');
+    console.log(location);
+
+    let path=''
+    let query=null
+    // 判断location是string 还是obj
+    if(typeof location === 'string'){
+        path=location
+    }else{
+        path=location.path
+        query=location.query
+    }
+
+    // 判断是否已经存在面包屑中 
+    let index=-1
+    store.state.breadCrumbList.forEach((item,e) => {
+        if(item.path === path){
+          index=e
+        }
+    });
+    if(index===-1){//不存在
+        const routesItem=getToRoute(path)
+        store.commit('setBreadCrumb', routesItem)
+    }else{
+        console.log('拦截路由push改为返回');
+        const _index=index-(store.state.breadCrumbList.length-1)
+        router.go(_index)
+        setTimeout(() => {
+            if(query){
+                router.replace({
+                    query:query
+                })
+            }else{
+                router.replace(path)
+            }
+        }, 10);
+        return
+    }
+
+
+    // 调用原来的push函数，并捕获异常
+    return routerPush.call(this, location).catch(error => error)
+}
+
+
+// 监听路由后退事件
+const listenRouterBack=()=>{
+    if(window.history&&window.history.pushState){{
+        $(window).on('popstate',()=>{
+            console.log('路由后退');
+            const path=window.location.pathname
+            const routesItem=getToRoute(path)
+            store.commit('setBreadCrumb', routesItem)
+        })
+    }}
+}
+listenRouterBack()

src/views/activity/List.vue

@@ -285,7 +285,7 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                     <div class="flex bot">
                         <span class="time">{{formatActivityTime(item.startTime,item.endTime)}}</span>
                         <div>
-                            <block v-if="item.activityState===1">
+                            <template v-if="item.activityState===1">
                                 <span 
                                     style="width:138px"
                                     :class="['btn',item.registerState&&'active']"
@@ -293,7 +293,7 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                                     @click.stop="handleRegister(item)"
                                 >{{item.registerState?'取消线下报名':'报名线下参会'}}</span>
                                 <span :class="['btn',item.hasRemind&&'active']" @click.stop="handleRemind(item)">{{item.hasRemind?'取消提醒':'会议提醒'}}</span>
-                            </block>
+                            </template>
                             <!-- 音频播放 -->
                             <div 
                                 :class="['btn-audio',$store.state.audioData.activityId==item.activityId&&'btn-audio-active']"