动态修改title 路由跳转添加进度条 vue3+typescript

Nprogress是一个JavaScript写的显示页面载入进度的小插件

yarn add nprogress

在根目录新建permission.ts文件

import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { RouteLocationNormalized } from 'vue-router'

NProgress.configure({ showSpinner: false })

router.beforeEach((to, _, next) => {
  // Start progress bar
  NProgress.start()
  next()
})

router.afterEach((to: RouteLocationNormalized) => {
  // Finish progress bar
  NProgress.done()

  // set page title
  document.title = (to.meta.title as string) ?? 'page'
})

在main.ts 引入即可

import './permission'