系列文章目录

第一章 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工具的使用步骤，但只是这样，还远远不足以支撑企业级平台的搭建，一个真正能够应用于实战项目的路由设计，最起码要包含图标、路由嵌套等设计，如何搭建企业级的导航栏，留待下篇文章讲解。

第二章 vue3构建view admin后台管理系统——Vue Router使用详解