快捷導(dǎo)航

vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑的操作方法

更新時(shí)間：2024年04月24日 11:11:21 作者：毛三仙

vue頁(yè)面在實(shí)際開發(fā)中,經(jīng)常會(huì)遇到改變url參數(shù),重新加載頁(yè)面數(shù)據(jù)的需求,但是只改變頁(yè)面url并不會(huì)觸發(fā)組件的生命周期,這就需要用其他方法來(lái)實(shí)現(xiàn)了,本文重點(diǎn)介紹vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧

vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑

需求背景：a系統(tǒng)進(jìn)入b系統(tǒng)首頁(yè)（"/index"）需要攜帶token，如 example.com/index?token="thisIsMyToken" 需要再b系統(tǒng)中將地址欄攜帶的token清除

    getBtnType(type) {
       this.$router.push({
          path: "/",
          query: {
            token: 'thisIsMyToken'
          },
        })
    },

b系統(tǒng)中的router/index.js

        router.beforeEach((to, from, next) => {
  if (to.query.token) {
    localStorage.setItem("myToken", to.query.token)
    router.replace({ path: "/" }).then((res) => {
      next();
    })
  }
});

vue重新加載/刷新當(dāng)前頁(yè)面改變url參數(shù)觸發(fā)頁(yè)面生命周期

vue頁(yè)面在實(shí)際開發(fā)中，經(jīng)常會(huì)遇到改變url參數(shù)，重新加載頁(yè)面數(shù)據(jù)的需求，但是只改變頁(yè)面url并不會(huì)觸發(fā)組件的生命周期，這就需要用其他方法來(lái)實(shí)現(xiàn)了。

一、this.$router.go(0) 和 location.reload()

相當(dāng)于刷新瀏覽器，會(huì)重新加載頁(yè)面資源，體驗(yàn)相當(dāng)差。

二、推薦使用：provide / inject 組合

在index.vue（與頁(yè)面結(jié)構(gòu)有關(guān)）文件，聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載。

<template>
  <div>
    <menu-top></menu-top>
    <menu-slide></menu-slide>
    <div class="app-content">
        <transition name="router-fades" mode="out-in">
            <router-view v-if="isRefresh"></router-view>
        </transition>
    </div>
  </div>
</template>
<script>
import MenuTop from "@/components/menu-top.vue";
import MenuSlide from "@/components/menu-slide.vue";
export default {
  provide () { //注入重新加載組件方法（子頁(yè)面可以通過(guò)inject屬性接收）
    return {
      reload: this.reload 
    }
  },
  components: {
    MenuSlide,
    MenuTop
  },
  data () {
    return {
      isRefresh: true
    }
  },
  methods: {
    async reload () {
      this.isRefresh= false
      await this.$nextTick()
      this.isRefresh= true
    }
  }
}
</script>

原理：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效

在需要使用的子頁(yè)面通過(guò)inject屬性接收，直接調(diào)用this.reload()，只加載當(dāng)前組件，并且觸發(fā)組件的生命周期函數(shù)，不會(huì)刷新整個(gè)網(wǎng)站，效果很好

<template>
    <div></div>
</template>
<script>
    export default {
        inject: ['reload'],
        methods:{
            reloadFun () {
                this.reload()
            }
        }
    }
</script>

到此這篇關(guān)于vue實(shí)現(xiàn)進(jìn)入某個(gè)頁(yè)面后替換地址欄路徑的文章就介紹到這了,更多相關(guān)vue替換地址欄路徑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: