置顶

Vue3学习与实战 · 配置使用vue-router路由


字数:806 阅读时长:4分钟 阅读:85

随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-routerVue3中的配置和使用。

Vue3 Router

一、目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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路由文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 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: '/',
},
]
})

// 全局路由守卫
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

说明:

  • 路由模式:
    1. history模式对应createWebHistory()方法
    2. hash模式对应createWebHashHistory()方法
  • 路由懒加载:在vite+Vue3项目中使用import()会有报错,所以使用vue提供的一个方法defineAsyncComponent,详见另一篇:vue3 + vite实现异步组件和路由懒加载

  • 3-2.在src/main.js入口文件中注册使用路由

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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/>
1
2
3
4
5
// src/App.vue

<template>
<router-view/>
</template>

四、使用路由

  • 4-1.在Option API中使用和Vue 2.x中使用没有差别。如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
<div></div>
</template>

<script>
export default {
data() {
return {}
},
mounted() {
// 路由跳转 && 设置参数
this.$router.push({
path: '/list',
query: {
id: 123,
},
})

// 获取参数
let { id } = this.$route.query
},
}
</script>
  • 4-2.在Composition API中不能再直接访问 this.$routerthis.$route,所以要使用 useRouteruseRoute 函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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()

// 路由跳转 && 设置参数
router.push({
path: '/list',
query: {
id: 123,
},
})

// 获取参数
let { id } = route.query

// 局部路由守卫
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学习与实战》系列


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2021-11-26
最后更新: 2022-04-26
本文标题: Vue3学习与实战 · 配置使用vue-router路由
本文链接: https://www.tiven.cn/p/3747153d/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^