我們知道vue-router使(shi)用push跳轉可以通過瀏覽(lan)器(qi)的返回(hui)箭頭，就(jiu)能回(hui)到(dao)上一頁，是因為它有路由(you)棧(zhan)，每次(ci)跳轉都會存放（記錄）當前路由(you)的相關信(xin)息(xi)。

根據這個思路我們利用pinia+vue-router 來自定義路由棧。

說下項目中 自定義路由棧的使用場景：

用vue開發的h5移動端網頁使用router自帶的push跳轉會導致蘋果手機底部出現左右返回箭頭，為了美觀和方便布局 不想要自帶的箭頭，只能(neng)使用replace跳(tiao)轉。但是replace跳(tiao)轉有多(duo)個頁(ye)面想要每次(ci)返回(hui)上(shang)一(yi)頁(ye)的(de)(de)時候(hou)帶(dai)上(shang)原(yuan)有的(de)(de)路由參(can)(can)數(shu)，就(jiu)不好記錄(lu)帶(dai)參(can)(can)數(shu)上(shang)了(le)，于是決定(ding)自(zi)己定(ding)義一(yi)套(tao)路由棧只用replace跳(tiao)轉同樣能(neng)記錄(lu)到每個頁(ye)面的(de)(de)參(can)(can)數(shu)，正常的(de)(de)返回(hui)上(shang)一(yi)頁(ye)。

store/routerStore.ts 代碼：

import { defineStore } from 'pinia'import { reactive, toRefs } from 'vue'import router from '@/router'export const useRouterStore = defineStore('routerStore', () => {  const state: any = reactive({
    routerInn: [],    // 清理路由
    routerBackFun: (num = 1) => {      if (typeof num !== 'number') {
        num = 1
      }      // 清除當前路由棧，回到上一棧      if (state.routerInn?.length && state.routerInn[state.routerInn.length - num].backPath) {        const routerInnBack = { ...state.routerInn[state.routerInn.length - num] }        if (num) {
          state.routerInn.length -= num
        }
        router.replace({
          path: routerInnBack.backPath,
          query: routerInnBack.backQuery
        })
      }
    },    // 添加路由
    routerGoFun: (type, path = '', query, backPath, backQuery = '') => {      // backQuery 不傳形參時 默認值 undefined      if (type === 'routerInnPush') {        const routerInnItem = {
          backQuery,
          backPath,
          path,
          query
        }
        state.routerInn.push(routerInnItem)
      }      // 別的標識則不記錄-直接跳轉
      router.replace({
        path,
        query
      })
    }
  })  return {
    ...toRefs(state)
  }
}, {  // 持久化配置
  persist: {
    key: 'routerStore',    // 修改為 sessionStorage，默認為 localStorage
    storage: sessionStorage,
  },
})

home/index.vue 代碼：

<template>  <div class="home">    <div style="background-color: pink;color: #fff;">=測試=自定義路由棧</div>    <button @click="routerStore.routerGoFun('routerInnPush','/lx',{title: 'home say:你好'},'/')">跳轉到練習頁</button>  </div></template><script name="Home" lang="ts" setup>import { onMounted, } from 'vue'import { useRouterStore } from '@/store/routerStore'// 'routerInnPush'const routerStore = useRouterStore()

onMounted(() => {  //})</script><style lang="css" scoped>.home {  color: pink;  font-size: 16px;
}</style>

home/Lx.vue 代碼：

<template>  <div style="font-size: 14px;">    <div>Lx頁</div>    <br>    <div>傳參：{{ route.query.title }}</div>    <br>    <button @click="routerStore.routerGoFun('routerInnPush','/lxb',{title: 'lx say: 你好啊'},route.path,route.query)">跳轉到練習b頁面</button>    <br>    <br>    <button @click="routerStore.routerBackFun">返回上一頁</button>  </div></template><script lang="ts" setup>import { useRouterStore } from '@/store/routerStore'import { useRoute } from 'vue-router'const routerStore = useRouterStore()const route = useRoute()</script>

home/Lxb.vue 代碼：

<template>  <div style="font-size: 14px;">    <h2>我是練習b{{ route?.params?.title }}頁面</h2>    <div>傳參：{{ route.query.title }}</div>    <button @click="routerStore.routerBackFun">返回上一頁</button>  </div></template><script lang="ts" setup>import { useRouterStore } from '@/store/routerStore'import { useRoute } from 'vue-router'const routerStore = useRouterStore()const route = useRoute()</script>

頁面初始效果：

點擊跳轉到練習頁按鈕后》頁面效果：

再點擊跳轉到練習b頁面按鈕后》頁面效果：

再點擊返回上一頁按鈕后》頁面效果：

再再點擊返回上一頁按鈕后》頁面效果：

可以看到雖然每次都是使用replace跳轉，但是(shi)每(mei)次返(fan)回上一(yi)(yi)頁時 帶(dai)回了每(mei)個(ge)頁面的(de)原(yuan)有參數(shu)，成功搭(da)建了自己的(de)路由棧。（當然(ran)使用(yong)vuex+全局事(shi)件 或其它(ta)方式(shi)也可以實(shi)現，一(yi)(yi)起(qi)試試吧，歡迎留(liu)言交流(liu)）

歡迎(ying)關(guan)注我(wo)的(de)原創文章(zhang)：小(xiao)伙(huo)伴(ban)們！我(wo)是一名熱衷于前端開發的(de)作者，致力于分享我(wo)的(de)知識和經驗，幫助其他學習(xi)前端的(de)小(xiao)伙(huo)伴(ban)們。在我(wo)的(de)文章(zhang)中(zhong)，你將會找到大量關(guan)于前端開發的(de)精彩內容。

學習(xi)前端(duan)技術(shu)是(shi)現代互聯網時代中(zhong)非常(chang)重要的一項(xiang)技能(neng)。無(wu)論你是(shi)想(xiang)成為一名專業的前端(duan)工程師，還是(shi)僅僅對前端(duan)開(kai)發感興趣，我的文章將能(neng)為你提供寶(bao)貴(gui)的指導(dao)和知識。

在我(wo)的文章中，你將會學(xue)到如何使用(yong)HTML、CSS和(he)JavaScript創(chuang)建(jian)精美的網頁(ye)。我(wo)將深入講解每(mei)個語言的基礎知識，并提供一(yi)些實用(yong)技巧和(he)最佳實踐。無論你是(shi)初學(xue)者還是(shi)有一(yi)定經驗(yan)的開(kai)發者，我(wo)的文章都(dou)能夠滿足你的學(xue)習需求(qiu)。

此外，我還(huan)會分享一些關于前端開(kai)發(fa)的(de)最新(xin)動態和(he)行業(ye)趨勢。互聯網技術在(zai)不(bu)斷(duan)發(fa)展，新(xin)的(de)框架(jia)和(he)工具層出不(bu)窮。通過我的(de)文章，你將會了解到最新(xin)的(de)前端技術趨勢，并(bing)了解如何應(ying)對(dui)這些變化(hua)。

我(wo)深知學習前(qian)端(duan)不易，因此(ci)我(wo)將盡力以簡潔明(ming)了的(de)方式解(jie)釋復雜的(de)概念，并提供一些易于理解(jie)的(de)實例和案例。我(wo)希望(wang)我(wo)的(de)文章能夠(gou)幫(bang)助你更快(kuai)地(di)理解(jie)前(qian)端(duan)開發，并提升你的(de)技能。

如果你(ni)想了解更(geng)多關于(yu)前(qian)端開發(fa)的(de)內容，不妨關注我的(de)原創文(wen)章。我會(hui)不定期(qi)更(geng)新，為你(ni)帶來(lai)最新的(de)前(qian)端技術(shu)和(he)知識。感謝你(ni)的(de)關注和(he)支(zhi)持，我們一起探討交流技術(shu)共同進步，期(qi)待與你(ni)一同探索前(qian)端開發(fa)的(de)奇妙世(shi)界！

#web##web前端面試題##web前端知識分享##web前端怎么入門學習##web零基礎#

#vue3##vue##vue好用嗎#