系列文章目录
第一章 vue3构建view admin后台管理系统——技术选型
第二章 vue3构建view admin后台管理系统——Vue Router使用详解
前言
上篇文章我们已经完成了Vue3项目选型,路由管理工具使用官方推荐的Vue Router。第一次构建完整的路由管理,我建议采用iview推荐项目提供的模板,虽然模板项目很鸡贼地删减了一些优化设计,但是也足以搭建一个简易的路由管理。
一、官网示例讲解
我们把官网的示例代码拿过来:
// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = {
template: '<div>Home</div>' }
const About = {
template: '<div>About</div>' }
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({
})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')
第一步:定义路由组件,这就是我们项目中一个个需要导航到的页面。
第二步:定义路由routes,这是一个路由描述数组,在这里定义每个路由的一些属性,一共也没几个,具体可浏览官网,不用记忆,有个印象就行。
第三步:调用createRouter方法,得到router对象。
第四步:app.use(router)使用插件。
二、项目中使用步骤
官方示例的步骤旨在帮助我们全面地了解vue router的使用步骤,真实项目中,肯定不能这样简单地在一个页面或者一个模块中实现。
所以我们要为我们真实的项目,构建一个合理的router路由管理模块。
1.作为插件引入
如果您学习过本系列上一篇文章,那么对vue文件结构应该有了一个大致了解,我们所有的插件都是在main.js中引入,为何只在这一个入口文件引入,答案请翻阅上篇文章。
这里只讲解用法:
//引入
import router from '@/router/index.js'
//使用,router是其中一个插件,具体有多少个use,视项目引入多少插件而定
createApp(App).use(router).use(createPinia()).use(ViewUIPlus).mount('#app')
2.router模块——index.js
从上面引入的路径可知,我们是在router/index.js中暴露了所有路由信息,然后才在main.js中引入使用。
我的router/index.js代码如下:
import {
createRouter,createWebHashHistory} from 'vue-router'
import {
routes} from './router'
import {
getToken } from '@/lib/util'
const router=createRouter({
// history:createWebHistory(),
history:createWebHashHistory(), //只能用hash模式
routes
})
router.beforeEach((to,from)=>{
const token = getToken() //如果不涉及token,这句代码可删除
if (
// 检查用户是否已登录
!token &&
// ❗️ 避免无限重定向
to.name !== 'login'
) {
// 将用户重定向到登录页面
return {
name: 'login' }
}
})
export default router
因为我的项目是个人项目,所以这个路由管理其实是相对简单的,token获取也只是根据习惯,在这里加上了,其实本项目目前并不涉及token验证。
这里注释说只能用hash模式,是因为electron的缘故,如果是单纯的vue3前端项目,个人建议使用history模式。
这就是我们最简单的路由管理入口文件,里面唯一需要自己完善的,就是router.beforeEach部分(导航守卫),这部分需要根据项目需求,逐渐增加更多业务代码,其余部分基本都是固定的。
所有页面路由访问之前,都会先经过router.beforeEach部分,所以我们可以在其中自由地定义在哪些条件时,可以访问某个路由,在哪些条件时,不能访问某些路由,称之为导航守卫。
这里面第二行代码,./router文件便是我们定义路由信息的文件。这是一种模块化的思想,路由插件使用的代码都放在main.js,路由操作的代码都放在router/index.js中,路由定义的代码则放在router/router.js中。
3.router模块——router.js
router.js中定义了所有的路由信息。
最简单的示例便是如官网示例一般,只有路径和组件,如下:
const Home = {
template: '<div>Home</div>' }
const About = {
template: '<div>About</div>' }
const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About },
]
适配我们的文件结构,对其改造后:
import Home from '@/views/Home.vue'
import About from '@/views/About.vue' //这两个组件的路径是我虚拟的,我们一般习惯在router.js文件中引入组件,而不是直接定义组件内容
export const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About },
]
这样看来,是不是舒服多了,重新梳理一遍使用步骤:
- main.js中引入使用router插件
- 在router模块的index.js文件中定义路由操作,并把路由信息引入进来,路由对象暴露出去。
- 在router模块的router.js文件中定义路由信息。
总结
本文简单讲解了vue router工具的使用步骤,但只是这样,还远远不足以支撑企业级平台的搭建,一个真正能够应用于实战项目的路由设计,最起码要包含图标、路由嵌套等设计,如何搭建企业级的导航栏,留待下篇文章讲解。