越多越好
文章目录
- 一、指定项目路径别名
- 二、全局loading进度条实现
- 三、动态页面标题的实现
- 四、全局刷新 和 全屏
一、指定项目路径别名
- 在 vite.config.js 里配置
import path from "path"export default defineConfig({resolve:{alias:{"~":path.resolve(__dirname,"src")}},
})
二、全局loading进度条实现
- 安装 nprogress
npm install nprogress// main.js 引入
import "nprogress/nprogress.css"
nprogress.start() // 进度条开启
nprogress.done() // 进度条关闭
- 可以再 beforeEach 、 afterEach 路由守卫里开启、关闭
三、动态页面标题的实现
- 首先,你需要在你的路由配置文件中为每个路由对象添加一个meta字段,并为其设置相应的title属性
const routes = [{path: '/',name: 'Home',component: Home,meta: { title: '首页' } // 添加meta字段,定义标题},{path: '/about',name: 'About',component: About,meta: { title: '关于我们' } // 添加meta字段,定义标题}
]
- 全局路由守卫 beforeEach,也就是说当路由跳转前,使用路由元信息(meta)设置页面标题
router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = to.meta.title + ' - 网站名称';} else {document.title = '网站名称';}next();
});
四、全局刷新 和 全屏
- 全局刷新
// js 原生方法
location.reload()
- 全屏
可以使用 vueuse 提供的 useFullScreen,使用前需要安装 vueuse 及他的核心包
npm i @vueuse/core // 核心包import { useFullscreen } from '@vueuse/core'
const {isFullscreen,enter,exit,toggle} = useFullscreen()<el-icon class="icon-btn" @click="toggle"><full-screen v-if="!isFullscreen" /><aim v-else />
</el-icon>isFullscreen: 是否是全屏状态
enter:进入全屏
exit:退入全屏
toggle: 半/全屏切换 (enter/exit的集合)