欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3動態(tài)路由(響應式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法

 更新時間：2024年07月12日 09:55:04   作者：笑小楓  
問題來源是因為我的開源項目Maple-Boot項目的網(wǎng)站前端,因為項目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁會根據(jù)不同的菜單進行渲染不同的路由,本文降介紹Vue3動態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下

背景

先說說問題，問題來源是因為我的開源項目Maple-Boot項目的網(wǎng)站前端，因為項目主打的內(nèi)容發(fā)布展示，所以其中的內(nèi)容列表頁會根據(jù)不同的菜單進行渲染不同的路由。

這里路由path使用的是/blog/:menu?，通過menu的參數(shù)來渲染對應的內(nèi)容，但是遇到了一個問題，在使用<RouterLink :to="{name: blog, params: {menu:java}}">跳轉(zhuǎn)時，改變params的值，頁面不會重新渲染。

    {
      path: "/blog/:menu?",
      name: "blog",
      component: BlogView,
    },

官方答疑

查看官網(wǎng)，得到結(jié)論如下：

官網(wǎng)地址：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

使用帶有參數(shù)的路由時需要注意的是，當用戶從 /users/johnny 導航到 /users/jolyne 時，相同的組件實例將被重復使用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會被調(diào)用。

同時也給出了解決方案

方案一：使用watch

要對同一個組件中參數(shù)的變化做出響應的話，你可以簡單地 watch $route 對象上的任意屬性，在這個場景中，就是 $route.params

方案二：使用 beforeRouteUpdat???????

或者，使用 beforeRouteUpdate 導航守衛(wèi)，它還允許你取消導航

我的解決方案

我復用的頁面是BlogView，原始完整內(nèi)容如下，主要看不同的內(nèi)容，防止直接貼部分代碼有同學找不到頭腦，這里貼全部的內(nèi)容吧，很多引用是找不到的

<script setup>
import {onMounted, reactive, watch} from "vue";
import { useRoute } from 'vue-router';

import Meta from "@/examples/Meta.vue";
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
import Header from "@/examples/Header.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
import BlogIndex from "./Sections/BlogIndex.vue";


import {getWebMenuByPath} from "../../api/common";

const route = useRoute();

const state = reactive({
  webMenuInfo: {},
  isGetData: false
});

onMounted(() => {
  getWebMenuByPathClick(route.params.menu);
});

const getWebMenuByPathClick = (menuPath) => {
  getWebMenuByPath(menuPath).then(res => {
    state.webMenuInfo = res;
    state.isGetData = true;
  });
}

</script>
<template>
  <Meta v-if="state.isGetData" :webMenuInfo="state.webMenuInfo"/>
  <div class="container position-sticky z-index-sticky top-0  opacity-8">
    <div class="row">
      <div class="col-12">
        <DefaultNavbar :sticky="true"/>
      </div>
    </div>
  </div>
  <Header>
    <div
      class="page-header min-height-400"
      :style="{ backgroundImage: `url(${state.webMenuInfo.image})` }"
      loading="lazy"
    >
      <span class="mask bg-gradient-dark opacity-3"></span>
    </div>
  </Header>
  <BlogIndex :menuPath="state.webMenuInfo.path"/>
  <DefaultFooter />
</template>

修改后的內(nèi)容

<script setup>
import {onMounted, reactive, watch} from "vue";
import { useRoute } from 'vue-router';

import Meta from "@/examples/Meta.vue";
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
import Header from "@/examples/Header.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
import BlogIndex from "./Sections/BlogIndex.vue";


import {getWebMenuByPath} from "../../api/common";

const route = useRoute();

const state = reactive({
  webMenuInfo: {},
  isGetData: false
});

onMounted(() => {
  getWebMenuByPathClick(route.params.menu);
});

const getWebMenuByPathClick = (menuPath) => {
  getWebMenuByPath(menuPath).then(res => {
    state.webMenuInfo = res;
    state.isGetData = true;
  });
}

watch(() => route.params.menu, (newId, oldId) => {
  getWebMenuByPathClick(route.params.menu);
})

</script>
<template>
  <Meta v-if="state.isGetData" :webMenuInfo="state.webMenuInfo"/>
  <div class="container position-sticky z-index-sticky top-0  opacity-8">
    <div class="row">
      <div class="col-12">
        <DefaultNavbar :sticky="true"/>
      </div>
    </div>
  </div>
  <Header>
    <div
      class="page-header min-height-400"
      :style="{ backgroundImage: `url(${state.webMenuInfo.image})` }"
      loading="lazy"
    >
      <span class="mask bg-gradient-dark opacity-3"></span>
    </div>
  </Header>
  <BlogIndex :menuPath="state.webMenuInfo.path" :key="state.webMenuInfo.path"/>
  <DefaultFooter />
</template>

變更點一：變更的點主要是加了watch監(jiān)聽route.params變化時，重新請求數(shù)據(jù)。

watch(() => route.params.menu, (newId, oldId) => {
  getWebMenuByPathClick(route.params.menu);
})

變更點二：在<BlogIndex>子組件上添加:key="state.webMenuInfo.path"，通過不同的key標注為不同組件

<BlogIndex :menuPath="state.webMenuInfo.path" :key="state.webMenuInfo.path"/>

看下效果

通過路由/blog/article可以看到背景圖和分類的數(shù)據(jù)查詢出來了

當路由切換到/blog/nterview-fenbushi，可以看到背景圖發(fā)生了變化，同時因為沒有配置對應的分類欄目，數(shù)據(jù)渲染為空的。

到此這篇關于Vue3動態(tài)路由(響應式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法的文章就介紹到這了,更多相關Vue3動態(tài)路由變更頁面不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • vue基于session和github-oauth2實現(xiàn)登錄注冊驗證思路詳解

    vue基于session和github-oauth2實現(xiàn)登錄注冊驗證思路詳解

    通過 sessionId 可以在 session 表中獲取用戶的信息,此外,還利用 session 表實現(xiàn)了GitHub 的 OAuth2 第三方登錄,本文講解前端通過簡單的方式實現(xiàn)一個基本的登錄注冊驗證功能,感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • 登錄頁面的實現(xiàn)及跳轉(zhuǎn)代碼實例(vue-router)

    登錄頁面的實現(xiàn)及跳轉(zhuǎn)代碼實例(vue-router)

    在Vue.js中可以使用vue-router來實現(xiàn)前端路由,通過路由來跳轉(zhuǎn)頁面,這篇文章主要給大家介紹了關于登錄頁面的實現(xiàn)及跳轉(zhuǎn)(vue-router)的相關資料,需要的朋友可以參考下
    2023-12-12
  • Vue中qs插件的使用詳解

    Vue中qs插件的使用詳解

    這篇文章主要介紹了Vue中qs插件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02
  • 解決vue addRoutes不生效問題

    解決vue addRoutes不生效問題

    這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 一文秒懂Vue3的v-model

    一文秒懂Vue3的v-model

    v-model 是 Vue 內(nèi)置的指令作為屬性接收一個變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧
    2023-02-02
  • Vue中emit事件無法觸發(fā)的問題及解決

    Vue中emit事件無法觸發(fā)的問題及解決

    這篇文章主要介紹了Vue中emit事件無法觸發(fā)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue中使用js-cookie詳情

    Vue中使用js-cookie詳情

    這篇文章主要介紹了Vue中使用js-cookie詳情，文章圍繞js-cookie的相關資料展開詳細內(nèi)容具有一定的的參考價值，需要的小伙伴可以參考一下
    2022-03-03
  • Vue3打包部署報錯的解決方案

    Vue3打包部署報錯的解決方案

    這篇文章主要介紹了Vue3打包部署報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解

    Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解

    在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個數(shù)組來存儲表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個對象,對象的屬性對應表格的列,這篇文章主要介紹了Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解,需要的朋友可以參考下
    2024-05-05
  • Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題

    Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題

    這篇文章主要介紹了Vue使用.sync 實現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下
    2019-04-04

最新評論