本文章讲解vue3基础路由配置(完整代码放在最后)
1、 安装vue-router包
npm i vue-router --save
2、在目录下创建router文件夹 用于存放router配置
3、接下来我们就要开始书写路由文件的配置了,这里面我们基础的需要实现两部操作
- 创建并路由实例
- 写路由配置
我们会用到createRouter、createWebHistory、createHashWebHistory和defineAsyncComponent几个方法
createRouter接收一个RouterOptions类型的参数用来初始化router,RouterOptions这个参数包含history, routes,scrollBehavior 等
history是配置路由历史的type,官方文档是这样说的
其实从我们使用浏览器的认知来看,我们接触到的大多数的链接都是 history模式的,不是hash模式
基本的路由控制代码
const router = craeteRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'helloWorld',
components: defineAsyncComponent(() => import('@/views/HelloWorld.vue')),
meta: {
title: 'hello_world'
} // meta用于提供一些路由用到的配置,例如这是页面名称、页面是否需要鉴权
}
]
})
接下来和vue2一样 写一个简单的路由守卫
router.beforeEach((from, to, next) => {
//一般路由守卫中会做一些鉴权和权限控制的事情
if (to.meta && to.meta.title) {
document.title = to.meta.title
}
next()
})
最后一步 将这个router导出,然后在main.ts中引入
app.use(router)
或者可以导出一个函数
export function setRouter(app: App<Element>) {
app.use(router)
}
然后在main.ts中调用这个函数,传入APP 这样会优雅一点
这样一个简单的router配置就好了, 如果页面很多我们,路由文件很多 我们就要给路由文件进行抽象,封装到不同的module,然后使用 import.meta.globEager()一起倒入,
如果路由守卫过于复杂也要单独起文件用于路由守卫处理,然后通过出口文件一起引用,最后导出一个router
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'helloWord',
component: defineAsyncComponent(() => import(`../views/helloWrod/index.vue`))
},
{
path: '/login',
name: 'login',
component: defineAsyncComponent(() => import(`../views/User/login.vue`))
},
{
path: '/hello_word',
name: 'helloWord',
component: defineAsyncComponent(() => import(`../views/helloWrod/index.vue`)),
children: [
{
path: '/hello_word_view',
name: 'helloWordView',
component: defineAsyncComponent(() => import(`../views/helloWrod/detail.vue`)),
},
{
path: '/hello_word_view2',
name: 'helloWordView2',
component: defineAsyncComponent(() => import(`../views/helloWrod/detail2.vue`)),
}
]
}
]
})
// 全局路由守卫
router.beforeEach((to, from, next)=>{
// console.log(to, from)
if (to.meta.title) {
document.title = `${to.meta.title}`;
}
next()
})
export default router