为了一个面包屑修改了路由跳转方法很慌

.env.development

@@ -5,6 +5,6 @@ VITE_APP_BASE_URL="/"
 # 打包输入文件名
 VITE_APP_OUTDIR="dist"
 # 扫码登录appid
-VITE_APP_APPID="wx4da95wxcba9a7ec590ee2d5782cfc8c5eb"
+VITE_APP_APPID="wxcba9a7ec590ee2d5"
 # 扫码登录回跳地址
 VITE_APP_REDIRECT_URI="https://ybpctest.hzinsights.com/report/index"

src/components/LoginPop.vue

@@ -102,7 +102,7 @@ const handleLogin=async (type)=>{
     }
     const res=await apiUserLogin(params)
     if(res.code===200){
-        window.location.href(import.meta.env.VITE_APP_REDIRECT_URI)
+        window.location.href=import.meta.env.VITE_APP_REDIRECT_URI
     }
 }
 

src/hooks/useHZRouter.js

@@ -0,0 +1,82 @@
+// 自定义路由钩子
+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
+}
+
+export default function(){
+
+    // 路由跳转方法
+    const push=({path,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)
+            router.push({
+                path:path,
+                query:query
+            })
+        }else{
+            console.log('走返回逻辑',path,query);
+            const _index=index-(store.state.breadCrumbList.length-1)
+            router.go(_index)
+            setTimeout(() => {
+                router.replace({
+                    query:query
+                })
+            }, 10);
+        }
+    }
+
+    const replace=({path,query})=>{
+        if(path){
+            router.replace({
+                path:path,
+                query:query
+            })
+        }else{
+            router.replace({
+                query:query
+            })
+        }
+    }
+
+    const go=(num)=>{
+        // let index=num+(store.state.breadCrumbList.length-1)
+        // const path=store.state.breadCrumbList[index].path
+        // const routesItem=getToRoute(path)
+        // store.commit('setBreadCrumb', routesItem)
+        router.go(num)
+    }
+
+    return {push,replace,go}
+}
+
+export const listenRouterBack=()=>{
+    if(window.history&&window.history.pushState){{
+        $(window).on('popstate',()=>{
+            console.log('路由后退',window.location);
+            const path=window.location.pathname
+            const routesItem=getToRoute(path)
+            store.commit('setBreadCrumb', routesItem)
+        })
+    }}
+}

src/layout/component/Header.vue

@@ -6,7 +6,9 @@ import { apiGetPermissionList } from "@/api/common.js";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { apiLastApplyRecord ,apiApplyPermission} from "@/api/user";
 import { useRouter } from "vue-router";
+import useHZRouter from '@/hooks/useHZRouter'
 
+const HZRouter=useHZRouter()
 const router = useRouter();
 const store = useStore();
 store.dispatch("getUserInfo"); //获取个人信息
@@ -125,17 +127,17 @@ const handleContact = async () => {
 const goBack=()=>{
   if(window.history.state.back){
     console.log('返回上一页');
-    router.go(-1)
+    HZRouter.go(-1)
   }else{
     console.log('返回首页');
-    router.push({path:'/'})
+    HZRouter.push({path:'/report/index'})
   }
 }
 
 // 点击面包屑
 const handleClickBreadCrumb=(item,index)=>{
   const _index=index-(store.state.breadCrumbList.length-1)
-  router.go(_index)
+  HZRouter.go(_index)
 }
 </script>
 

src/main.js

@@ -7,6 +7,10 @@ import 'element-plus/dist/index.css'
 import "@/style/global.scss";//全局样式
 import 'normalize.css'
 import {drag} from  "./directive/drag"
+import {listenRouterBack} from '@/hooks/useHZRouter';
+
+listenRouterBack()// 监听路由后退事件 更新面包屑
+
 
 
 

src/router/index.js

@@ -244,7 +244,9 @@ router.beforeEach((to, from, next) => {
 		store.commit('getToken', to.query.token)
     store.dispatch('getUserInfo')
 	}
-  store.commit('setBreadCrumb', to)
+  if(to.meta.isRoot){
+    store.commit('setBreadCrumb', to)
+  }
   document.title=to.meta.title
 	next();
 })

src/store/index.js

@@ -127,12 +127,14 @@ export default createStore({
     },
 
     // 设置面包屑数据
+    // 在全局路由钩子中和自定义路由函数中调用
     setBreadCrumb(state,data){
+      console.log('store中设置面包屑',data);
       // 如果是侧边栏 清除路由栈
       if (data.meta.isRoot) {
         let obj = {
-          name: data.matched[0].meta.title,
-          path:''
+          name: data.meta.title,
+          path:data.path
         }
         state.breadCrumbList=[obj]
       }else{

src/views/activity/Detail.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { computed, reactive, ref,onMounted } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import { formatActivityTime } from "./utils";
 import { ElMessage } from 'element-plus'
+import useHZRouter from '@/hooks/useHZRouter'
+
+const HZRouter=useHZRouter()
 
 const route = useRoute();
-const router=useRouter()
 
 // 获取详情
 import { apiActivityDetail } from "@/api/activity.js";
@@ -125,7 +127,13 @@ const formatAudioTime=(e)=>{
 // 跳转报告详情
 const goDetail=()=>{
     let params=info.value.reportLink.split('?')[1]
-    router.push(`/activity/reportdetail?${params}`)
+    let research_report_id=params.split('=')[1]
+    HZRouter.push({
+        path:'/activity/reportdetail',
+        query:{
+            research_report_id:research_report_id
+        }
+    })
 }
 
 
@@ -157,10 +165,10 @@ const handlePlayAudio=(index)=>{
 const goBack=()=>{
     if(window.history.state.back){
         console.log('返回上一页');
-        router.go(-1)
+        HZRouter.go(-1)
     }else{
         console.log('返回首页');
-        router.push({path:'/'})
+        HZRouter.push({path:'/report/index'})
     }
 }
 
@@ -182,7 +190,13 @@ const handleApply=()=>{
         }else{
             if(!noAuth.data.customer_info.status||noAuth.data.customer_info.status!='流失'){
                 console.log('跳转申请页');
-                router.push('/apply/permission?source=2&fromPage=活动详情')
+                HZRouter.push({
+                    path:'/apply/permission',
+                    query:{
+                        source:2,
+                        fromPage:'活动详情'
+                    }
+                })
             }else{//主动调一次申请权限接口 
                 apiApplyPermission({
                     company_name:noAuth.data.customer_info.company_name,

src/views/activity/List.vue

@@ -2,9 +2,10 @@
 import {reactive,ref, watch,onUnmounted,onMounted,onUpdated,onActivated} from 'vue'
 import SelfList from '@/components/SelfList.vue'
 import { useRouter } from "vue-router";
+import useHZRouter from '@/hooks/useHZRouter'
 import {formatActivityTime} from './utils'
 
-const router=useRouter()
+const HZRouter=useHZRouter()
 
 import {apiActivityList} from '@/api/activity.js'
 let listData=reactive({
@@ -86,7 +87,7 @@ const onLoad=()=>{
 
 // 跳转详情
 const goDetail=(id)=>{
-    router.push({
+    HZRouter.push({
         path:'/activity/detail',
         query:{
             id:id
@@ -240,8 +241,6 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
     wx.miniProgram.postMessage({ data: postData });
 })
 
-
-
 </script>
 
 

src/views/activity/ReportDetail.vue

@@ -1,10 +1,11 @@
 <script setup>
 import moment from 'moment'
 import {ref,onMounted} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useStore } from 'vuex';
+import useHZRouter from '@/hooks/useHZRouter'
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 const store=useStore()
 moment.locale('zh-cn')
 
@@ -59,7 +60,7 @@ onMounted(()=>{
 
 // 跳转章节详情
 const goChapterDetail=(item)=>{
-    router.push({
+    HZRouter.push({
         path:'/activity/chapterdetail',
         query:{
             research_report_type_id:item.ResearchReportTypeId,

src/views/activity/applyAuth.js

@@ -7,7 +7,8 @@
  */
 import {apiApplyPermission} from '@/api/user'
 import { ElMessage,ElMessageBox } from 'element-plus'
-import router from "@/router";
+import useHZRouter from '@/hooks/useHZRouter'
+const HZRouter=useHZRouter()
 export const applyAuth=(res,type,source,fromPage)=>{
     if(res.code===200){
         const htmlStr=`<h4 style="text-align:center;margin-bottom:5px;font-size:16px;margin-top:0">设置成功</h4>
@@ -100,7 +101,13 @@ export const applyAuth=(res,type,source,fromPage)=>{
                 }else{
                     if(!res.data.customer_info.status||res.data.customer_info.status!='流失'){
                         console.log('跳转申请页');
-                        router.push('/apply/permission?source=2&fromPage=活动列表')
+                        HZRouter.push({
+                            path:'/apply/permission',
+                            query:{
+                                source:2,
+                                fromPage:'活动列表'
+                            }
+                        })
                     }else{//主动调一次申请权限接口 
                         apiApplyPermission({
                             company_name:res.data.customer_info.company_name,

src/views/report/ChapterDetail.vue

@@ -11,10 +11,11 @@ import {apiGetWechatQRCode} from '@/api/common'
 import { ElMessageBox } from 'element-plus'
 import moment from 'moment';
 import AudioBox from './components/AudioBox.vue'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute,onBeforeRouteUpdate } from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 
 let chapterId=ref(route.query.chapterId||'') //章节id
 let frompage=ref(route.query.frompage||'')//如果来自报告详情页 则展示底部章节列表
@@ -147,14 +148,12 @@ const getAsideMoreRecmd=async (data)=>{
 
 // 点击侧边栏更多推荐
 const handleClickAsideRecmd=item=>{
-    router.replace({
+    HZRouter.push({
+        path:'/report/detail',
         query:{
-            chapterId:item.ReportChapterID
+            reportId:item.ReportId
         }
     })
-    chapterId.value=item.ReportChapterID
-    getChapterReportDetail()
-    getQRCodeImg()
 }
 
 //侧边栏报告合集
@@ -171,7 +170,7 @@ const getAsideBanner=async (data)=>{
 
 //点击侧边栏报告合集
 const handleAsideBanner=(data)=>{
-    router.push({
+    HZRouter.push({
         path:'/report/list',
         query:{
             classifyId:data.ClassifyIdFirst,
@@ -224,6 +223,13 @@ onMounted(()=>{
     })
 })
 
+onBeforeRouteUpdate((to,from)=>{
+    console.log(to.query);
+    chapterId.value=to.chapterId
+    getChapterReportDetail()
+    getQRCodeImg()
+})
+
 // 无权限点击申请
 const handleGoApply=async ()=>{
     if(info.value.permission_check.type=='apply'){
@@ -239,7 +245,13 @@ const handleGoApply=async ()=>{
             })
         }else{
           if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'){
-            router.push('/apply/permission?source=4&fromPage=报告详情')
+            HZRouter.push({
+                path:'/apply/permission',
+                query:{
+                    source:4,
+                    fromPage:'报告详情'
+                }
+            })
           }else{//主动调一次申请权限接口 
             const res=await apiApplyPermission({
               company_name:info.value.permission_check.customer_info.company_name,

src/views/report/Classify.vue

@@ -1,9 +1,9 @@
 <script setup>
 import {onMounted, ref} from 'vue'
 import {apiReportClassify} from '@/api/report'
-import { useRouter } from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 
-const router=useRouter()
+const HZRouter=useHZRouter()
 
 // 向小程序发送数据
 const handleDataToXcx=()=>{
@@ -30,7 +30,7 @@ getClassifyList()
 const goNext=(item)=>{
     // redirect_type : 跳转页面类型：1专栏列表，2报告列表，3专栏详情
     if(item.redirect_type===1){
-        router.push({
+        HZRouter.push({
             path:'/report/specialcolumnlist',
             query:{
                 classifyId:item.classify_id_first,
@@ -39,7 +39,7 @@ const goNext=(item)=>{
         })
     }
     if(item.redirect_type===2){
-        router.push({
+        HZRouter.push({
             path:'/report/list',
             query:{
                 classifyId:item.classify_id_first,
@@ -48,7 +48,7 @@ const goNext=(item)=>{
         })
     }
     if(item.redirect_type===3){
-        router.push({
+        HZRouter.push({
             path:'/report/specialcolumndetail',
             query:{
                 columnId:item.classify_id_second
@@ -66,7 +66,7 @@ onMounted(()=>{
 </script>
 <template>
     <div class="report-classify-page">
-        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="$router.push('/report/ficcserveintro')">
+        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="HZRouter.push({path:'/report/ficcserveintro'})">
         <div class="list-wrap">
             <el-row :gutter="20">
                 <el-col :span="6" v-for="item in list" :key="item.classify_name_first">

src/views/report/Detail.vue

@@ -6,29 +6,17 @@ import 'moment/dist/locale/zh-cn'
 import AudioBox from './components/AudioBox.vue'
 import {apiReportDetail,apiReportMoreRecmd,apiReportDetailBanner} from '@/api/report'
 import {apiGetWechatQRCode} from '@/api/common'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute , onBeforeRouteUpdate} from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 import { useStore } from 'vuex';
 moment.locale('zh-cn')
 
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 const store=useStore()
 
 let reportId=ref(route.query.reportId||'')
 
-//点击侧边栏更多推荐
-const handleClickAsideRecmd=(item)=>{
-    router.replace({
-        query:{
-            reportId:item.ReportId
-        }
-    })
-    // 更新页面数据
-    reportId.value=item.ReportId
-    getReportDetail()
-    getQRCodeImg()
-}
-
 // 获取报告详情
 let info=ref(null)
 let audioData=ref(null)
@@ -102,6 +90,19 @@ const getAsideMoreRecmd=async (data)=>{
     }
 }
 
+//点击侧边栏更多推荐
+const handleClickAsideRecmd=(item)=>{
+    HZRouter.replace({
+        query:{
+            reportId:item.ReportId
+        }
+    })
+    // 更新页面数据
+    // reportId.value=item.ReportId
+    // getReportDetail()
+    // getQRCodeImg()
+}
+
 //侧边栏报告合集
 let banner=ref(null)
 const getAsideBanner=async (data)=>{
@@ -117,7 +118,7 @@ const getAsideBanner=async (data)=>{
 //点击侧边栏报告合集
 const handleAsideBanner=(data)=>{
     if(data.Type=='报告合集'){
-        router.push({
+        HZRouter.push({
             path:'/report/list',
             query:{
                 classifyId:data.ClassifyIdFirst,
@@ -125,7 +126,7 @@ const handleAsideBanner=(data)=>{
             }
         })
     }else{
-        router.push({
+        HZRouter.push({
             path:'/report/specialcolumndetail',
             query:{
                 columnId:data.ClassifyIdSecond
@@ -157,6 +158,14 @@ onMounted(()=>{
     })
 })
 
+onBeforeRouteUpdate((to,from)=>{
+    console.log(to.query);
+    // 更新页面数据
+    reportId.value=to.query.reportId
+    getReportDetail()
+    getQRCodeImg()
+})
+
 // 设置章节列表tag颜色
 const getTagColor=(str)=>{
     if( str.includes('多')||str.includes('强')||str.includes('反弹') ){
@@ -170,7 +179,7 @@ const getTagColor=(str)=>{
 
 // 跳转章节详情
 const goChapterDetail=(item)=>{
-    router.push({
+    HZRouter.push({
         path:'/report/chapterdetail',
         query:{
             chapterId:item.report_chapter_id,
@@ -194,7 +203,13 @@ const handleGoApply=async ()=>{
             })
         }else{
             if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'){
-                router.push('/apply/permission?source=4&fromPage=报告详情')
+                HZRouter.push({
+                    path:'/apply/permission',
+                    query:{
+                        source:4,
+                        fromPage:'报告详情'
+                    }
+                })
             }else{//主动调一次申请权限接口 
                 const res=await apiApplyPermission({
                     company_name:info.value.permission_check.customer_info.company_name,

src/views/report/Index.vue

@@ -8,13 +8,14 @@ import {
 import { onActivated, onMounted, reactive, ref } from "vue"
 import Search from "@/components/Search.vue"
 import SelfList from '@/components/SelfList.vue'
-import { onBeforeRouteLeave, useRouter } from "vue-router"
+import { onBeforeRouteLeave } from "vue-router"
+import useHZRouter from '@/hooks/useHZRouter'
 import { ElMessageBox } from 'element-plus'
 import moment from 'moment'
 import 'moment/dist/locale/zh-cn'
 moment.locale('zh-cn')
 
-const router = useRouter()
+const HZRouter=useHZRouter()
 
 // 向小程序发送数据
 const handleDataToXcx=()=>{
@@ -37,7 +38,7 @@ const getLatestNews=async ()=>{
 }
 //点击最新资讯跳转报告详情
 const handleClickNews=item=>{
-  router.push({
+  HZRouter.push({
     path:'/report/detail',
     query:{
       reportId:item.ReportId
@@ -171,21 +172,21 @@ getNewAnnounce()
 
 //跳转至研报分类页
 const handleGoMoreClassify = () => {
-  router.push({ path:'/report/classify' });
+  HZRouter.push({ path:'/report/classify' });
 };
 
 //点击上新公告
 const handleClickAnnounce=(data)=>{
   //redirect_type 0活动 1专栏
   if(data.redirect_type==0){
-    router.push({
+    HZRouter.push({
       path:'/activity/detail',
       query:{
         id:data.Activity.activityID
       }
     })
   }else{
-    router.push({
+    HZRouter.push({
       path:'/report/specialcolumndetail',
       query:{
         columnId:data.ClassifyIdSecond
@@ -205,14 +206,14 @@ const formatAnnounceActivityTime=(start,end)=>{
 //跳转报告详情
 const handleGoReportDetail=(item)=>{
   if(['晨报','周报'].includes(item.classify_name_first)){
-    router.push({
+    HZRouter.push({
       path:'/report/chapterdetail',
       query:{
         chapterId:item.report_chapter_id
       }
     })
   }else{
-    router.push({
+    HZRouter.push({
       path:'/report/detail',
       query:{
         reportId:item.report_id
@@ -253,7 +254,7 @@ onActivated(()=>{
         style="margin-top: 10px;"
         placeholder="请输入标题/关键词"
         :disabled="true"
-        @click="$router.push('/report/search')"
+        @click="HZRouter.push({path:'/report/search'})"
       ></Search>
     </teleport>
   </template>

src/views/report/List.vue

@@ -4,11 +4,12 @@ import moment from 'moment';
 import { apiSubClassifyList , apiReportList } from '@/api/report'
 import Search from '@/components/Search.vue'
 import SelfList from '@/components/SelfList.vue'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 import { useStore } from 'vuex';
 
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 const store=useStore()
 
 
@@ -98,7 +99,7 @@ const handleSearch=(e)=>{
 
 // 跳转报告详情
 const goReportDetail=(item)=>{
-    router.push({
+    HZRouter.push({
         path:'/report/detail',
         query:{
             reportId:item.report_id

src/views/report/Search.vue

@@ -4,9 +4,10 @@ import {apiReportSearch} from '@/api/report'
 import moment from 'moment'
 import Search from "@/components/Search.vue"
 import SelfList from '@/components/SelfList.vue'
-import { onBeforeRouteLeave, useRouter } from 'vue-router'
+import { onBeforeRouteLeave } from 'vue-router'
+import useHZRouter from '@/hooks/useHZRouter'
 
-const router=useRouter()
+const HZRouter=useHZRouter()
 
 let listState=reactive({
     list:[],
@@ -49,14 +50,14 @@ const handleSearch=(e)=>{
 
 const goDetail=(item)=>{
     if(['晨报','周报'].includes(item.classify_name_first)){
-        router.push({
+        HZRouter.push({
             path:'/report/chapterdetail',
             query:{
                 chapterId:item.report_chapter_id
             }
         })
     }else{
-        router.push({
+        HZRouter.push({
             path:'/report/detail',
             query:{
                 reportId:item.report_id

src/views/report/specialColumn/Detail.vue

@@ -3,11 +3,12 @@ import {onActivated, reactive, ref} from 'vue'
 import moment from 'moment';
 import SelfList from '@/components/SelfList.vue'
 import {apiSpecialColumnDetail,apiSpecialColumnReportList,apiSpecialColumnComment} from '@/api/report'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 import { useStore } from 'vuex';
 
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 const store=useStore()
 
 let nav=ref('专栏介绍')
@@ -84,7 +85,7 @@ const onLoad=()=>{
 
 //跳转报告详情
 const goReportDetail=(item)=>{
-    router.push({
+    HZRouter.push({
         path:'/report/detail',
         query:{
             reportId:item.report_id

src/views/report/specialColumn/List.vue

@@ -2,10 +2,11 @@
 import {onActivated, onMounted, reactive, ref} from 'vue'
 import SelfList from '@/components/SelfList.vue'
 import {apiReportClassify,apiSpecialColumnList} from '@/api/report'
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import useHZRouter from '@/hooks/useHZRouter'
 
 const route=useRoute()
-const router=useRouter()
+const HZRouter=useHZRouter()
 
 document.title=decodeURIComponent(route.query.classifyName)
 
@@ -50,7 +51,7 @@ const handleClickTab=(item)=>{
 
 // 跳转专栏详情
 const goSpecialColumnDetail=(item)=>{
-    router.push({
+    HZRouter.push({
         path:'/report/specialcolumndetail',
         query:{
             columnId:item.classify_id_second