隨著Vue版本的升級漾狼，Vue 2.x項目和Vue 3.x項目在使用vue-router上有些區(qū)別账胧，本文就簡單介紹下vue-router在Vue3中的配置和使用窝剖。
Vue3 Router
一棠隐、目錄結(jié)構(gòu)
demo/
package.json
vite.config.js
index.html
public/
src/
api/
assets/
common/
components/
store/
views/
home.vue
list.vue
router/
index.js
App.vue
main.js
二、版本依賴
vite: ^2.0.0
vue: ^3.2.8
vue-router: ^4.0.1
三轻黑、配置路由
- 3-1.配置
src/router/index.js路由文件
// src/router/index.js
import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({
// history: createWebHashHistory(), // hash 模式
history: createWebHistory(), // history 模式
routes: [
{
path: '/',
name: 'home',
component: defineAsyncComponent(() => import(`../views/home.vue`)),
meta: {
title: '首頁',
},
},
{
path: '/list',
name: 'list',
component: defineAsyncComponent(() => import(`../views/list.vue`)),
meta: {
title: '列表頁',
},
},
{
path: '/*',
redirect: '/',
},
]
})
// 全局路由守衛(wèi)
router.beforeEach((to, from, next)=>{
// console.log(to, from)
if (to.meta.title) {
document.title = `${to.meta.title}`;
}
next()
})
router.afterEach((to, from)=>{
// console.log(to, from)
console.log('afterEach')
})
export default router
說明：
-
路由模式：
-
history模式對應(yīng)createWebHistory()方法 -
hash模式對應(yīng)createWebHashHistory()方法
-
路由懶加載：在
vite+Vue3項目中使用import()會有報錯糊肤，所以使用vue提供的一個方法defineAsyncComponent，詳見另一篇：vue3 + vite實現(xiàn)異步組件和路由懶加載3-2.在
src/main.js入口文件中注冊使用路由
// src/main.js
import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
// ...
const app = createApp(App)
app.use(router).use(store);
app.mount('#app')
- 3-3.在
src/App.vue文件中使用<router-view/>
// src/App.vue
<template>
<router-view/>
</template>
四氓鄙、使用路由
- 4-1.在
Option API中使用和Vue 2.x中使用沒有差別馆揉。如下：
<template>
<div></div>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
// 路由跳轉(zhuǎn) && 設(shè)置參數(shù)
this.$router.push({
path: '/list',
query: {
id: 123,
},
})
// 獲取參數(shù)
let { id } = this.$route.query
},
}
</script>
- 4-2.在
Composition API中不能再直接訪問this.$router或this.$route，所以要使用useRouter和useRoute函數(shù)抖拦。
<template>
<div></div>
</template>
<script>
import { ref } from 'vue'
import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import ajax from "./ajax";
export default {
setup () {
const router = useRouter()
const route = useRoute()
// 路由跳轉(zhuǎn) && 設(shè)置參數(shù)
router.push({
path: '/list',
query: {
id: 123,
},
})
// 獲取參數(shù)
let { id } = route.query
// 局部路由守衛(wèi)
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'是否要離開本頁面升酣？'
)
// 取消導航并停留在同一頁面上
if (!answer) return false
})
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//僅當 id 更改時才獲取用戶，例如僅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await ajax(to.params.id)
}
})
},
}
</script>
《Vue3學習與實戰(zhàn)》系列
- Vue3學習與實戰(zhàn) · 組件通信
- Vue3學習與實戰(zhàn) · 全局掛載使用Axios
- Vue3學習與實戰(zhàn) · 配置使用vue-router路由（本文）
- Vue3學習與實戰(zhàn) · Vuex狀態(tài)管理
- vue3 + vite實現(xiàn)異步組件和路由懶加載
- Vite+Vue3+Vant快速構(gòu)建項目
歡迎訪問：天問博客
