作者:叶子美容美体养生馆os | 来源:互联网 | 2023-09-09 21:46
目录
- 引言
- 一、目录结构
- 二、版本依赖
- 三、配置路由
- 四、使用路由
引言
随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用。
一、目录结构
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: '/',
},
]
})
// 全局路由守卫
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模式对应createWebHistory()方法
- hash模式对应createWebHashHistory()方法
- 路由懒加载:在vite+Vue3项目中使用import()会有报错,所以使用vue提供的一个方法defineAsyncComponent,详见另一篇:vue3 + vite实现异步组件和路由懒加载
- 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')
四、使用路由
- 4-1.在Option API中使用和Vue 2.x中使用没有差别。如下:
- 4-2.在Composition API中不能再直接访问 this.$router 或 this.$route,所以要使用 useRouter 和 useRoute 函数。