云阳有没有做网站的,各大网站开发语言,Wordpress 无效插件,专业做辅助的网站越多越好 文章目录 一、指定项目路径别名二、全局loading进度条实现三、动态页面标题的实现四、全局刷新 和 全屏 一、指定项目路径别名
在 vite.config.js 里配置
import path from pathexport default defineConfig({resolve:{alias:{~:path.resol… 越多越好 文章目录 一、指定项目路径别名二、全局loading进度条实现三、动态页面标题的实现四、全局刷新 和 全屏 一、指定项目路径别名
在 vite.config.js 里配置
import path from pathexport default defineConfig({resolve:{alias:{~:path.resolve(__dirname,src)}},
})二、全局loading进度条实现
安装 nprogress
npm install nprogress// main.js 引入
import nprogress/nprogress.cssnprogress.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 classicon-btn clicktogglefull-screen v-if!isFullscreen /aim v-else /
/el-iconisFullscreen: 是否是全屏状态
enter:进入全屏
exit:退入全屏
toggle: 半/全屏切换 enter/exit的集合
