目錄
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的命名子路由不再添加斜線
如果看了覺得有幫助的，我是@上進的鵬多多，歡迎 點贊 關注 評論；END
PS：在本頁按F12，在console中輸入document.querySelectorAll('.diggit')[0].click()，有驚喜哦
公眾號
往期文章
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 使用nvm管理node.js版本以及更換npm淘寶鏡像源
- 超詳細！Vue-Router手把手教程
- vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令
- 微信小程序實現搜索關鍵詞高亮
- 超詳細！Vue的九種通信方式
- 超詳細！Vuex手把手教程
個人主頁