1，前言
本文主要講開發過程中需要常用的，有些api不常用，需要的時候可以自行查找文檔。因為V3中沒有了this，所以router4語法有所修改，模板中我們仍然可以訪問$router和$route，所以不需要在setup中返回router或route
1，Router
這邊主要介紹常用的跳轉方法修改
2.1，跳轉
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，打開新頁面
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，守衛
4.1，onBeforeRouteLeave
可以替代組件內守衛，新增的組合式Api，離開當前頁面路由時觸發，return false則阻止跳轉
import { onBeforeRouteLeave } from 'vue-router'
export default {
setup() {
onBeforeRouteLeave((to, from) => {
if (to.name !== 'home') {
return false
}
})
}
}
4.2，onBeforeRouteUpdate
新增的組合式Api，路由更新時觸發
import { onBeforeRouteUpdate } from 'vue-router'
export default {
setup() {
onBeforeRouteUpdate((to, from) => {
if (to.params.id !== from.params.id) {
console.log('......')
}
})
}
}
4.3，路由守衛語法
// 原寫法
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'選項替換為更靈活的名稱history
| Router3 | Router4 |
|---|---|
| history | createWebHistory() |
| hash | createWebHashHistory() |
| abstract | createMemoryHistory() |
base選項移除，修改為createWebHistory等方法的第1個參數傳遞transition和keep-alive必須放在router-view里面刪除
<router-link>中的event和append和tag屬性router.onReady()函數已被router.isReady()取代刪除
router.match改為router.resolve所有的導航現在都是異步的，如果使用
transition，需要等待路由ready好后再掛載程序帶有空
path的命名子路由不再添加斜線
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點贊 關注 評論；
END
PS：在本頁按F12，在console中輸入document.querySelectorAll('._2VdqdF')[0].click()，有驚喜哦
往期文章
個人主頁
