Vue3動態(tài)路由(響應式帶參數的路由)變更頁面不刷新的問題解決辦法
背景
先說說問題，問題來源是因為我的開源項目Maple-Boot項目的網站前端，因為項目主打的內容發(fā)布展示，所以其中的內容列表頁會根據不同的菜單進行渲染不同的路由。
這里路由path使用的是/blog/:menu?，通過menu的參數來渲染對應的內容，但是遇到了一個問題，在使用<RouterLink :to="{name: blog, params: {menu:java}}">跳轉時，改變params的值，頁面不會重新渲染。
{
path: "/blog/:menu?",
name: "blog",
component: BlogView,
},
官方答疑
查看官網，得到結論如下：
官網地址：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
使用帶有參數的路由時需要注意的是，當用戶從 /users/johnny 導航到 /users/jolyne 時，相同的組件實例將被重復使用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會被調用。
同時也給出了解決方案
方案一：使用watch
要對同一個組件中參數的變化做出響應的話，你可以簡單地 watch $route 對象上的任意屬性，在這個場景中，就是 $route.params
方案二：使用 beforeRouteUpdat???????
或者，使用 beforeRouteUpdate 導航守衛(wèi)，它還允許你取消導航
我的解決方案
我復用的頁面是BlogView，原始完整內容如下，主要看不同的內容，防止直接貼部分代碼有同學找不到頭腦，這里貼全部的內容吧，很多引用是找不到的
<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>
修改后的內容
<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變化時，重新請求數據。
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可以看到背景圖和分類的數據查詢出來了
當路由切換到/blog/nterview-fenbushi，可以看到背景圖發(fā)生了變化，同時因為沒有配置對應的分類欄目，數據渲染為空的。
到此這篇關于Vue3動態(tài)路由(響應式帶參數的路由)變更頁面不刷新的問題解決辦法的文章就介紹到這了,更多相關Vue3動態(tài)路由變更頁面不刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue基于session和github-oauth2實現(xiàn)登錄注冊驗證思路詳解
通過 sessionId 可以在 session 表中獲取用戶的信息,此外,還利用 session 表實現(xiàn)了GitHub 的 OAuth2 第三方登錄,本文講解前端通過簡單的方式實現(xiàn)一個基本的登錄注冊驗證功能,感興趣的朋友跟隨小編一起看看吧2024-08-08
登錄頁面的實現(xiàn)及跳轉代碼實例(vue-router)
在Vue.js中可以使用vue-router來實現(xiàn)前端路由,通過路由來跳轉頁面,這篇文章主要給大家介紹了關于登錄頁面的實現(xiàn)及跳轉(vue-router)的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue中qs插件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了解決vue addRoutes不生效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
v-model 是 Vue 內置的指令作為屬性接收一個變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧2023-02-02
這篇文章主要介紹了Vue中emit事件無法觸發(fā)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue中使用js-cookie詳情，文章圍繞js-cookie的相關資料展開詳細內容具有一定的的參考價值，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了Vue3打包部署報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數據模型,通常使用一個數組來存儲表格的數據,每一行數據可以是一個對象,對象的屬性對應表格的列,這篇文章主要介紹了Vue實現(xiàn)一個動態(tài)添加行的表格步驟詳解,需要的朋友可以參考下2024-05-05
Vue使用.sync 實現(xiàn)父子組件的雙向綁定數據問題
這篇文章主要介紹了Vue使用.sync 實現(xiàn)父子組件的雙向綁定數據,需要的朋友可以參考下2019-04-04