1，前言
本文主要講開發(fā)過程中需要常用的，有些api不常用，需要的時(shí)候可以自行查找文檔。因?yàn)?code>V3中沒有了this，所以router4語(yǔ)法有所修改，模板中我們?nèi)匀豢梢栽L問$router和$route，所以不需要在setup中返回router或route
1，Router
這邊主要介紹常用的跳轉(zhuǎn)方法修改
2.1，跳轉(zhuǎn)
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const Router = useRouter()
const to = function() {
Router.push({
name: 'About',
params: {
id: 999
}
})
}
onMounted(() => {
console.log(Router)
})
return {
to
}
}
}
2.2，打開新頁(yè)面
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const Router = useRouter()
const toBlank = function() {
const Path = Router.resolve({
name: 'About',
query: {
id: '123'
}
})
window.open(Path.href, '_blank')
}
return {
toBlank
}
}
}
3，Route
這邊主要講一下如何獲取路由傳遞的值
路由取值
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
export default {
name: 'Home',
setup() {
const Route = useRoute()
onMounted(() => {
console.log('onMounted')
console.log(Route.params.id)
console.log(Route.meta)
})
}
}
4，守衛(wèi)
4.1，onBeforeRouteLeave
可以替代組件內(nèi)守衛(wèi)，新增的組合式Api，離開當(dāng)前頁(yè)面路由時(shí)觸發(fā)，return false則阻止跳轉(zhuǎn)
import { onBeforeRouteLeave } from 'vue-router'
export default {
setup() {
onBeforeRouteLeave((to, from) => {
if (to.name !== 'home') {
return false
}
})
}
}
4.2，onBeforeRouteUpdate
新增的組合式Api，路由更新時(shí)觸發(fā)
import { onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
if (to.params.id !== from.params.id) {
console.log('......')
}
})
}
}
4.3，路由守衛(wèi)語(yǔ)法
// 原寫法
Router.beforeEach((to, from, next) => {
if (ok) {
next()
} else {
next(false)
}
})
// 新寫法
Router.beforeEach((to, from) => {
if (ok) {
console.log('...')
} else {
return false
}
})
5，重要變更
使用
createRouter替換new Router()mode: 'history'選項(xiàng)替換為更靈活的名稱history
| Router3 | Router4 |
|---|---|
| history | createWebHistory() |
| hash | createWebHashHistory() |
| abstract | createMemoryHistory() |
base選項(xiàng)移除，修改為createWebHistory等方法的第1個(gè)參數(shù)傳遞transition和keep-alive必須放在router-view里面刪除
<router-link>中的event和append和tag屬性router.onReady()函數(shù)已被router.isReady()取代刪除
router.match改為router.resolve所有的導(dǎo)航現(xiàn)在都是異步的，如果使用
transition，需要等待路由ready好后再掛載程序帶有空
path的命名子路由不再添加斜線
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點(diǎn)贊 關(guān)注 評(píng)論；
END
PS：在本頁(yè)按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦
往期文章
個(gè)人主頁(yè)
