❤ Vue3+vite搭建篇（二）
1、项目Vite 配置公共引用路径@
（1）引入路径和定位跟目录
打开vite.config.ts配置
import path from 'path'
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
（2）vite.config.ts完整如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
})
2、配置后台主页admin和pc主页pc
（1）添加admin和PC主页面路由
（2）添加admin和PC页面
（3）主页面加入按钮
<div class="about">
<el-button type="primary">我是主页</el-button>
<el-button type="primary" @click="totiao('pc')">PC</el-button>
<el-button type="primary" @click="totiao('admin')">admin</el-button>
</div>
（4）使用vue3语法糖，导入路由进行跳转
<script setup>
import {useRouter} from 'vue-router'
const router=useRouter();
function totiao(row){
router.push(row);
}
</script>
PC和admin均可以正常跳转
3、配置路由拦截
（1）概述
我们的网页需要用户登录后才可以进行显示，不然将其拦截到登录页面。
登录成功后，前端的 header 加上 token 值。如果 token 值为空，说明未登录
在src下新建utils文件夹
定义白名单
设置路由守卫
（2）permission.ts里面配置相对应的规则
这里我简单的将规则给总结了一下
想法
将所有的Pc页面添加进入白名单---未采用
条件如下
1 在免登录白名单–或者有token，直接进入–不检测
2 没token验证去的地方
3 没token验证–去的地方admin—去login
4 没token验证–去的地方pc子页面—PC子页面进入5 其他进入pc主页面
所以我们的permission.ts 文件里面的内容就如下
import router from '@/router'
const whiteList = ['/','/pc','/register', '/login', '/about', '/main', '/demo','admin']; //定义白名单
// 路由守卫
router.beforeEach((to, from, next) => {
// 将所有的Pc页面添加进入白名单---未采用
// 1 在免登录白名单--或者有token，直接进入--不检测
// 2 没token验证去的地方
// 3 没token验证--去的地方admin---去login
// 4 没token验证--去的地方pc子页面---PC子页面进入
// 5 其他进入pc主页面
if (whiteList.indexOf(to.path) !== -1||localStorage.getItem('login')) {
console.log('白名单或者token账号进入1!');
next();
}
else if(to.name == 'admin'){
next('/login')
}
else if(to.matched.length!=0){
console.log(to.matched.map((item)=>item.name).indexOf('pc')!=-1,'循环');
if(to.matched.map((item)=>item.name).indexOf('pc')!=-1){
console.log('PC子页面进入!');
next()
}
else{next('/pc')}
}
else {
console.log('其他进入pc主页面5!');
next('/pc')
}
});
router.afterEach(() => {
console.log('路由加载完成！');
});
export { permission }
（3）路由守卫作用（可跳过）
上面代码我们简单写了一个路由守卫，其作用如下:
在路由切换前进行权限验证和导航控制,控制路由权限和导航逻辑，根据一定的规则来判断是否允许用户访问某个页面，以及在路由切换时执行相关操作。
-
首先，通过
import语句引入了router实例。 -
定义了一个
whiteList数组，其中包含了一些不需要进行权限验证的路由路径，也就是所谓的白名单。 -
使用
router.beforeEach()方法注册一个全局前置守卫，该守卫会在每次路由切换前被调用。 -
在守卫函数中，根据一定的逻辑判断来决定是否允许进行路由切换：
-
如果当前路由路径在白名单中，或者本地存储中存在登录信息（即已经登录），则直接执行
next()函数，允许路由切换。 -
如果跳转的目标路由是 “admin”，则强制跳转到登录页 “/login”。
-
如果跳转的目标路由的
matched数组长度不为零（即匹配到了路由配置），则进一步判断是否有名为 “pc” 的子路由：- 如果有，则直接执行
next()函数，允许路由切换。 - 如果没有，则强制跳转到 “pc” 页面。
- 如果有，则直接执行
-
如果以上条件都不满足，说明是其他情况，强制跳转到 “pc” 页面。
-
-
使用
router.afterEach()方法注册一个全局后置钩子，该钩子会在每次路由切换完成后被调用。 -
最后通过
export导出了一个名为permission的对象（可能是其他代码中引用了该对象）。
（4）使用
在根目录的main.ts里面引入和使用
import * as Permission from "@/utils/permission.ts"; //路由请求拦截器
const app = createApp(App)
app.use(Permission)
app.mount('#app')//挂载
效果：
当我们点击PC,白名单进入
当我们点击admin时候,存在路由拦截，没有token进入login登录界面
4、进度条NProgress引入：
nprogress官网可以去我的这个博客书签里面找
nexuslinnoa.gitee.io/nexusmark?u…
使用nprogress实现全局loading进度条
安装
yarn add nprogress
引入使用NProgress进度条
在src文件夹新建components文件夹，下面新建progress文件夹引进NProgress
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({
// 动画方式
easing: "ease",
// 递增进度条的速度
speed: 500,
// 是否显示加载ico
showSpinner: false,
// 自动递增间隔
trickleSpeed: 200,
// 初始化时的最小百分比
minimum: 0.3
});
export default NProgress;
在permission.ts里面进行使用
NProgress.start() //使用
NProgress.done() //停止
在permission.ts里面进行使用
import NProgress from "@/components/progress";
NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示
// 路由守卫
router.beforeEach((to, from, next) => {
...
NProgress.start(); //开启进度条
});
router.afterEach(() => {
...
NProgress.done(); //结束进度条
});
自定义背景样式和颜色
（1）assets下新建main.css
（2）在main.ts里面引入样式main.css
import './assets/main.css' //引入主要样式
（3） main.css样式如下
/*自定义进度条颜色*/
#nprogress .bar {
background:red important; /* 自定义颜色*/
}
（4）效果如下
原文链接：https://juejin.cn/post/7346238389987147811 作者：林太白
