vue3.0+ts+element-plus多页签应用模板：vue-router与vuex

系列文章

• vue3.0+ts+element-plus多页签应用模板：前言
• vue3.0+ts+element-plus多页签应用模板：项目搭建
• vue3.0+ts+element-plus多页签应用模板：vue-router与vuex
• vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
• vue3.0+ts+element-plus多页签应用模板：如何优雅地使用Svg图标
• vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
• vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（下）
• vue3.0+ts+element-plus多页签应用模板：多级路由缓存
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（上）
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（中）
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（下）

一、安装vue-router

因为我们是给vue3安装vue-router，所以需要指定4以上的版本号：

npm i vue-router@4 --save

安装成功后，在src目录下新建文件夹router，并创建route.ts：

import { RouteRecordRaw } from 'vue-router'

// 使用require.context()自动获取模块
const modules: RouteRecordRaw[] = []
const moduleFiles = require.context('./modules', false, /\.ts$/)
moduleFiles.keys().forEach((key) => modules.push(moduleFiles(key).default))
modules.sort((moduleA, moduleB) => {
  const orderA = moduleA.meta!.order as number
  const orderB = moduleB.meta!.order as number
  return orderA - orderB
})

const routes: RouteRecordRaw[] = [...modules]

export default routes

然后在router目录下新建modules目录，用来存放路由模块。为什么这里要使用模块化的路由呢？主要有两个原因：首先第一个是因为，当项目越来越大的时候，随之而来的是越来越多的路由，如果将这么多路由全都一股脑的写在一个文件里的话，后期维护会十分困难。另外一个，是因为我们要将路由与侧边菜单关联起来，做到增添路由时，侧边菜单也同步渲染。

然后我们在router目录下创建入口文件index.ts，输入以下代码：

import { createRouter, /*createWebHistory*/, createWebHashHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
  // history: createWebHistory(),   // history模式
  history: createWebHashHistory(),  // hash模式
  routes
})

export default router

这里我使用的是hash路由模式，也就是在URL中使用#哈希值来切换路由的方式。但是这种方式的URL很丑陋。所以我们也可以选择history模式。在history模式下。URL中的#会被消除，只有干干净净的路径。但是，history由于没有了哈希值，每次跳转路由都会请求完整的URL地址，这就需要在服务器端配置一下，否则当你刷新页面，或者直接访问某个非主页路由的时候，会出现404。这里使用nginx举个例子：

location / {
  root       /usr/local/html/multi-tabs;
  index      index.html;
  try_files  $uri $uri/ /index.html;
}

这样配置之后，服务器会按照try_files后面的参数依次去匹配root中对应的文件或文件夹。如果匹配到的是一个文件，那么将返回这个文件；如果匹配到的是一个文件夹，那么将返回这个文件夹中index指令指定的文件。而$uri参数将作为前面没有匹配到的fallback。$uri是nginx中的变量，比如我访问的网址是http://localhost:8080/home那么它代表的就是/home。

此外，我们还需要在vue.config.js中配置一下publicPath属性：

const options = { publicPath: '/' }

详细了解可以去这篇文章看看Vue Router history模式的配置方法及其原理

到这里，vue-router的引入就完成了。关于路由模块的写法，到后面侧边栏章节的时候再详述。

二、安装vuex

因为我们是给vue3安装vuex，所以需要指定4以上的版本号：

npm i vuex@4 --save

安装成功后，在src目录下新建文件夹store，并创建文件index.ts，然后输入以下代码：

import { createStore, useStore as rawUseStore } from 'vuex'

// 使用require.context()自动获取模块
const moduleFiles = require.context('./modules', false, /\.ts$/)
const modules = moduleFiles.keys().reduce((modules: ModuleTree<RootStateProps>, modulePath) => {
  const moduleName = Utils.getFileName(modulePath, 'Module')
  const value = moduleFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = createStore({ modules })

// 创建vuex-key，用于获取类型提示
export const key: InjectionKey<Store<RootStateProps>> = Symbol('vue-store')
// 导出可自动导入key的useStore方法
export const useStore = () => rawUseStore(key)
export default store

之后，同目录下创建modules文件夹，用于存放各个模块的全局状态。

三、改写main.ts

安装并配置好vue-router和vuex后，我们需要在main.ts中引入：

import router from './router'
import store, { key } from './store'
app.use(router)
app.use(store, key)

至此，vue-router和vuex就正式引入到项目中了

下一篇预告：vue3.0+ts+element-plus多页签应用模板：element-plus