快捷導(dǎo)航

Vue3動態(tài)路由(響應(yīng)式帶參數(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ù)來渲染對應(yīng)的內(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 導(dǎo)航到 /users/jolyne 時，相同的組件實例將被重復(fù)使用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會被調(diào)用。

同時也給出了解決方案

方案一：使用watch

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

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

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

我的解決方案

我復(fù)用的頁面是BlogView，原始完整內(nèi)容如下，主要看不同的內(nèi)容，防止直接貼部分代碼有同學(xué)找不到頭腦，這里貼全部的內(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ā)生了變化，同時因為沒有配置對應(yīng)的分類欄目，數(shù)據(jù)渲染為空的。

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

您可能感興趣的文章: