快捷導(dǎo)航

vue3之聲明式和編程式導(dǎo)航詳解

更新時(shí)間：2024年06月07日 11:11:41 作者：**之火

這篇文章主要介紹了vue3之聲明式和編程式導(dǎo)航,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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