Browse Source

面包屑路由跳转

jwyu 2 years ago
parent
commit
e0c3381ec0

BIN
src/assets/share-poster-icon.png


+ 7 - 4
src/hooks/useHZRouter.js

@@ -73,10 +73,13 @@ export default function(){
 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)
+            console.log('路由后退');
+            // const path=window.location.pathname
+            // const routesItem=getToRoute(path)
+            // store.commit('setBreadCrumb', routesItem)
+        })
+        $(window).on('pushstate',()=>{
+            console.log('路由改变');
         })
     }}
 }

+ 1 - 1
src/layout/component/Aside.vue

@@ -3,7 +3,7 @@ import { reactive, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 const route = useRoute();
 
-let activePath = ref("/activity/list");
+let activePath = ref("/report/index");
 watch(
   () => route.path,
   (to) => {

+ 3 - 5
src/layout/component/Header.vue

@@ -6,9 +6,7 @@ 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"); //获取个人信息
@@ -127,17 +125,17 @@ const handleContact = async () => {
 const goBack=()=>{
   if(window.history.state.back){
     console.log('返回上一页');
-    HZRouter.go(-1)
+    router.go(-1)
   }else{
     console.log('返回首页');
-    HZRouter.push({path:'/report/index'})
+    router.push({path:'/report/index'})
   }
 }
 
 // 点击面包屑
 const handleClickBreadCrumb=(item,index)=>{
   const _index=index-(store.state.breadCrumbList.length-1)
-  HZRouter.go(_index)
+  router.go(_index)
 }
 </script>
 

+ 7 - 5
src/store/index.js

@@ -134,7 +134,8 @@ export default createStore({
       if (data.meta.isRoot) {
         let obj = {
           name: data.meta.title,
-          path:data.path
+          path:data.path,
+          show:true
         }
         state.breadCrumbList=[obj]
       }else{
@@ -145,11 +146,12 @@ export default createStore({
             index=e
           }
         });
-        if (index==-1) {
-          state.breadCrumbList.push({name:data.meta.title,path:data.path})
+        if (index==-1) {//不存在
+          state.breadCrumbList.push({name:data.meta.title,path:data.path,show:true})
         }else{
-          const arr=state.breadCrumbList.slice(0,index+1)
-          state.breadCrumbList=arr
+          // const arr=state.breadCrumbList.slice(0,index+1)
+          // state.breadCrumbList=arr
+          state.breadCrumbList.push({name:data.meta.title,path:data.path,show:false})
         }
       }
 

+ 5 - 6
src/views/report/ChapterDetail.vue

@@ -11,11 +11,10 @@ import {apiGetWechatQRCode} from '@/api/common'
 import { ElMessageBox } from 'element-plus'
 import moment from 'moment';
 import AudioBox from './components/AudioBox.vue'
-import { useRoute,onBeforeRouteUpdate } from 'vue-router';
-import useHZRouter from '@/hooks/useHZRouter'
+import { useRoute,onBeforeRouteUpdate,useRouter } from 'vue-router';
 
 const route=useRoute()
-const HZRouter=useHZRouter()
+const router=useRouter()
 
 let chapterId=ref(route.query.chapterId||'') //章节id
 let frompage=ref(route.query.frompage||'')//如果来自报告详情页 则展示底部章节列表
@@ -148,7 +147,7 @@ const getAsideMoreRecmd=async (data)=>{
 
 // 点击侧边栏更多推荐
 const handleClickAsideRecmd=item=>{
-    HZRouter.push({
+    router.push({
         path:'/report/detail',
         query:{
             reportId:item.ReportId
@@ -170,7 +169,7 @@ const getAsideBanner=async (data)=>{
 
 //点击侧边栏报告合集
 const handleAsideBanner=(data)=>{
-    HZRouter.push({
+    router.push({
         path:'/report/list',
         query:{
             classifyId:data.ClassifyIdFirst,
@@ -245,7 +244,7 @@ const handleGoApply=async ()=>{
             })
         }else{
           if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'){
-            HZRouter.push({
+            router.push({
                 path:'/apply/permission',
                 query:{
                     source:4,

+ 6 - 6
src/views/report/Classify.vue

@@ -1,9 +1,9 @@
 <script setup>
 import {onMounted, ref} from 'vue'
 import {apiReportClassify} from '@/api/report'
-import useHZRouter from '@/hooks/useHZRouter'
+import {useRouter} from 'vue-router'
 
-const HZRouter=useHZRouter()
+const router=useRouter()
 
 // 向小程序发送数据
 const handleDataToXcx=()=>{
@@ -30,7 +30,7 @@ getClassifyList()
 const goNext=(item)=>{
     // redirect_type : 跳转页面类型:1专栏列表,2报告列表,3专栏详情
     if(item.redirect_type===1){
-        HZRouter.push({
+        router.push({
             path:'/report/specialcolumnlist',
             query:{
                 classifyId:item.classify_id_first,
@@ -39,7 +39,7 @@ const goNext=(item)=>{
         })
     }
     if(item.redirect_type===2){
-        HZRouter.push({
+        router.push({
             path:'/report/list',
             query:{
                 classifyId:item.classify_id_first,
@@ -48,7 +48,7 @@ const goNext=(item)=>{
         })
     }
     if(item.redirect_type===3){
-        HZRouter.push({
+        router.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="HZRouter.push({path:'/report/ficcserveintro'})">
+        <img :src="$store.state.globalImgUrls.ficcServiceImg" alt=""  class="top-banner" @click="$router.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">

+ 7 - 8
src/views/report/Detail.vue

@@ -7,13 +7,12 @@ import AudioBox from './components/AudioBox.vue'
 import SharePoster from '@/components/SharePoster.vue'
 import {apiReportDetail,apiReportMoreRecmd,apiReportDetailBanner} from '@/api/report'
 import {apiGetWechatQRCode} from '@/api/common'
-import { useRoute , onBeforeRouteUpdate} from 'vue-router';
-import useHZRouter from '@/hooks/useHZRouter'
+import { useRoute , onBeforeRouteUpdate,useRouter} from 'vue-router';
 import { useStore } from 'vuex';
 moment.locale('zh-cn')
 
 const route=useRoute()
-const HZRouter=useHZRouter()
+const router=useRouter()
 const store=useStore()
 
 let reportId=ref(route.query.reportId||'')
@@ -93,7 +92,7 @@ const getAsideMoreRecmd=async (data)=>{
 
 //点击侧边栏更多推荐
 const handleClickAsideRecmd=(item)=>{
-    HZRouter.replace({
+    router.replace({
         query:{
             reportId:item.ReportId
         }
@@ -119,7 +118,7 @@ const getAsideBanner=async (data)=>{
 //点击侧边栏报告合集
 const handleAsideBanner=(data)=>{
     if(data.Type=='报告合集'){
-        HZRouter.push({
+        router.push({
             path:'/report/list',
             query:{
                 classifyId:data.ClassifyIdFirst,
@@ -127,7 +126,7 @@ const handleAsideBanner=(data)=>{
             }
         })
     }else{
-        HZRouter.push({
+        router.push({
             path:'/report/specialcolumndetail',
             query:{
                 columnId:data.ClassifyIdSecond
@@ -180,7 +179,7 @@ const getTagColor=(str)=>{
 
 // 跳转章节详情
 const goChapterDetail=(item)=>{
-    HZRouter.push({
+    router.push({
         path:'/report/chapterdetail',
         query:{
             chapterId:item.report_chapter_id,
@@ -204,7 +203,7 @@ const handleGoApply=async ()=>{
             })
         }else{
             if(!info.value.permission_check.customer_info.status||info.value.permission_check.customer_info.status!='流失'){
-                HZRouter.push({
+                router.push({
                     path:'/apply/permission',
                     query:{
                         source:4,

+ 9 - 10
src/views/report/Index.vue

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

+ 3 - 4
src/views/report/List.vue

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

+ 4 - 5
src/views/report/Search.vue

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

+ 3 - 4
src/views/report/specialColumn/Detail.vue

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

+ 3 - 4
src/views/report/specialColumn/List.vue

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