vue3之聲明式和編程式導(dǎo)航詳解
vue3聲明式和編程式導(dǎo)航
在組件內(nèi)部,可以使用 router 屬性訪問(wèn)路由,例如 this.router 屬性訪問(wèn)路由,例如 this. router屬性訪問(wèn)路由,例如this.router.push(…)。
如果使用組合式 API,你可以通過(guò)調(diào)用 useRouter() 來(lái)訪問(wèn)路由器,導(dǎo)入后賦值給變量就行了,如:const router = useRouter();
聲明式 | 編程式 |
---|---|
<router-link :to=“…”> | router.push(…) |
<router-link :to=“…” replace> | 替換路由:router.replace(…) |
替換路由或:router.push({ path: ‘/home’, replace: true }),相當(dāng)于router.replace({ path: ‘/home’ }) |
編程式router.push(…) 多種寫法
// 字符串路徑 router.push('/users/eduardo') // 帶有路徑的對(duì)象 router.push({ path: '/users/eduardo' }) // 除了 path 之外,你還可以為任何路由提供 name // 命名的路由,并加上參數(shù),讓路由建立 url // 如果可能的話,使用 `name` 和 `params` 從自動(dòng) URL 編碼中獲益 // 路由將導(dǎo)航到路徑 /user/erina // 所有路由的命名都必須是唯一的。如果為多條路由添加相同的命名,路由器只會(huì)保留最后那一條。 router.push({ name: 'user', params: { username: 'eduardo' } }) <router-link :to="{ name: 'user', params: { username: 'erina' }}"> User </router-link> // 帶查詢參數(shù),結(jié)果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 帶 hash,結(jié)果是 /about#team router.push({ path: '/about', hash: '#team' }) // `params` 不能與 `path` 一起使用,如果提供了 path,params 會(huì)被忽略 router.push({ path: '/user', params: { username } }) // -> /user
router.push 和所有其他導(dǎo)航方法都會(huì)返回一個(gè) Promise,讓我們可以等到導(dǎo)航完成后才知道是成功還是失敗。
導(dǎo)航橫跨歷史
// 向前移動(dòng)一條記錄,與 router.forward() 相同 router.go(1) // 返回一條記錄,與 router.back() 相同 router.go(-1) // 前進(jìn) 3 條記錄 router.go(3) // 如果沒(méi)有那么多記錄,靜默失敗 router.go(-100) router.go(100)
router.push、router.replace 和 router.go 是window.history.pushState,window.history.replaceState 和 window.history.go 的翻版,它們模仿了 window.history 的 API。
為什么vue3中聲明響應(yīng)式一般用const
為什么Vue3中聲明響應(yīng)式對(duì)象一般用const。如
import { reactive } from 'vue' const state = reactive({ count: 0 })
因?yàn)?Vue 的響應(yīng)式系統(tǒng)是通過(guò)屬性訪問(wèn)進(jìn)行追蹤的(響應(yīng)式數(shù)據(jù)對(duì)象的屬性的副作用函數(shù)的訂閱),因此我們必須始終保持對(duì)該響應(yīng)式對(duì)象的相同引用。
副作用訂閱將被存儲(chǔ)在一個(gè)全局的 WeakMap<target, Map<key, Set>> 數(shù)據(jù)結(jié)構(gòu)中。
防止響應(yīng)式被替換丟失鏈接
let state = reactive({ count: 0 }) // 上面的引用 ({ count: 0 }) 將不再被追蹤(響應(yīng)性連接已丟失!) state = reactive({ count: 1 })
而如果使用const進(jìn)行聲明的話,state不允許被重新賦值??梢杂寐暶髯兞可戏绞巾憫?yīng)式鏈接丟失。防止原響應(yīng)式對(duì)象在WeakMap中失去。
當(dāng)我們將響應(yīng)式對(duì)象的屬性****賦值給變量或解構(gòu)至本地變量時(shí),或是將該屬性傳入一個(gè)函數(shù)時(shí),我們會(huì)失去響應(yīng)性,即賦值或結(jié)構(gòu)到的變量或參數(shù)函數(shù)不會(huì)引起響應(yīng)式數(shù)據(jù)的變化,原響應(yīng)式數(shù)據(jù)的變化也不會(huì)引起本地變量的變化。
const state = reactive({ count: 0 }) // n 是一個(gè)局部變量,同 state.count // 失去響應(yīng)性連接 let n = state.count // 不影響原始的 state n++ // count 也和 state.count 失去了響應(yīng)性連接 let { count } = state // 不會(huì)影響原始的 state count++ // 該函數(shù)接收一個(gè)普通數(shù)字,并且 // 將無(wú)法跟蹤 state.count 的變化 callSomeFunction(state.count)
使用ref維持響應(yīng)式
Vue3使用ref來(lái)給所有變量聲明響應(yīng)式。通過(guò)ref.value來(lái)訪問(wèn)數(shù)據(jù)對(duì)象,ref() 將傳入?yún)?shù)的值包裝為一個(gè)帶 .value 屬性的 ref 對(duì)象:
const count = ref(0) console.log(count) // { value: 0 } console.log(count.value) // 0 count.value++ console.log(count.value) // 1 const objectRef = ref({ count: 0 }) // 這是響應(yīng)式的替換 objectRef.value = { count: 1 }
ref對(duì)象的value也是響應(yīng)式的。當(dāng)ref傳入的參數(shù)數(shù)據(jù)是復(fù)合數(shù)據(jù)類型時(shí),會(huì)使用reactive自動(dòng)轉(zhuǎn)化value屬性。
簡(jiǎn)言之,ref() 讓我們能創(chuàng)造一種對(duì)任意值的 “引用”,并能夠在不丟失響應(yīng)性的前提下傳遞這些引用。這個(gè)功能很重要,因?yàn)樗?jīng)常用于將邏輯提取到 組合函數(shù) 中。
ref 被傳遞給函數(shù)或是從一般對(duì)象上被解構(gòu)時(shí),ref不會(huì)丟失響應(yīng)性:
即可以傳遞響應(yīng)式數(shù)據(jù)進(jìn)行操作。如函數(shù)式編程。
const obj = { foo: ref(1), bar: ref(2) } // 該函數(shù)接收一個(gè) ref // 需要通過(guò) .value 取值 // 但它會(huì)保持響應(yīng)性 callSomeFunction(obj.foo) // 仍然是響應(yīng)式的 const { foo, bar } = obj
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用節(jié)流函數(shù)的踩坑實(shí)例指南
防抖和節(jié)流的目的都是為了減少不必要的計(jì)算,下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下2021-05-05vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04深入分析element ScrollBar滾動(dòng)組件源碼
這篇文章主要介紹了element ScrollBar滾動(dòng)組件源碼深入分析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個(gè)支持 SQL 語(yǔ)法高亮和自動(dòng)補(bǔ)全的代碼編輯器,需要的朋友可以參考下2025-04-04