一.路由懒加载的使用
使用原因
1.使用原因
1） 使用一般写法（即直接填写组件的缺点）
当使用这种写法，页面在初次加载会将所有路由配置表的添加的组件一次性全部加载，如
果项目中组件代码量庞大，就需要很长时间德甲在，如果没有加载完，页面就会一直显示空
白，而这种情况带来的用户体验很差，所以需要进行优化。
2） 懒加载写法的好处
使用这种写法，所有的组件只会在路由地址被访问时才临时加载，当我们初次加载页面也
只会加载与首页相关的几个文档和组件，加载文档体积小，页面显示的速度会更快，这样就
提升了用户体验。
3） 项目代码的打包与文件的重新构建（补充点）
1> 指令：npm run build
2> 目的：为了将开发环境和生产环境分离，以及优化应用程序的性能和加载速度
3> 作用：
1>> 在开发阶段，我们通常会使用许多工具和库来辅助开发，例如 Webpack、Babel、
ESLint 等。这些工具和库可以帮助我们编写高质量的代码、提高开发效率、优化应用
程序的性能等。但是，这些工具和库通常会增加代码的体积和复杂度，因此在生产环
境中不需要使用它们。
2>> 此外，开发环境和生产环境的配置也有所不同，例如调试信息、代码压缩、错误处
理等，需要进行不同的设置。因此，我们需要将开发环境和生产环境分离，将开发环
境中的工具和库从最终的产品代码中剔除，以提高代码的性能和加载速度。这就是打
包构建的作用。
3>> npm run build 命令会执行项目中的构建脚本，将源代码转换为可部署的产品代
码，并将它们打包成一个或多个文件，以便在生产环境中使用。在打包过程中，我们
可以进行代码压缩、优化、分割等操作，以进一步提高应用程序的性能和加载速度。
2.代码解析
语法：()=>import('组件路径')，
只有在访问到该路由, 对应的组件才临时加载(下载并运行)
使用懒加载写法，就不需要在配置表文档引入组件
二.路由元信息（meta）
meta
1.概念以及要点
1） 概念与特点：路由元信息（元，开始，原始）
添加在路由规则中的一个属性，使用对象格式储存着特定的信息，任何时候访问当前路由，都会自动携带该路由元信息
2） 语法：
meta:{key:value,key:value}
2.代码演示
export default [
{
path:'/index',
name:'index',
component: Index,
children:[
{
path:'/index/gwc',
name:'gwc',
meta:{ title:'购物车',requireAuth:true },------------可以用于携带该条路由对应的页面标题，也可以携带该网页是否需要登录或者权限之类的判断属性
component: Gwc,
},
]
$ router和$ route的异同
1.概述总结
1） 异同总结
1> 异
1>> $router (叫做路由管理对象)，路由管理对象中储存着的是 API，用来管理路由
2>> $route (叫做路由对象)，路由对象中储存的都是数据，路由跳转那个地址，路由对
象就指向那条路由规则
2> 同
1>> 这两个对象都可以通过该项目内的任意组件实例获取
2>> 写法非常类似
2） 用法
1> $router
1>> this.$router.push('/detail')
2>> this.$router.go(-1)
3>> this.$router.back()--------返回上一条路由地址，等同于go(-1)
4>> this.$router.forward()--------去到下一条路由地址，等同于go(1)
2> $route
1>> this.$route.meta --------------------获取路由元信息
2>> this.$route.path ----------------------路由地址
3>> this.$route.name --------------------路由别名
4>>this.$route.params ---------------------路由参数
2.代码演示
export default {
mounted(){
this.$router 路由管理对象 ( 包含了用于管理路由的所有api )
this.$router.push('/detail')
this.$router.go(-1); --------------跳路由的方法
this.$router.back(); -------------------作用相当于 go(-1)，返回上一条路由
this.$router.forward(); --------------作用相当于go(1)，跳下一跳路由
this.$route 路由对象( 包含了和当前路由有关的所有信息, 路由地址, 路由参数, 路由元信息 )
this.$route.meta --------------------获取路由元信息
this.$route.path ----------------------路由地址
this.$route.name --------------------路由别名
this.$route.params ---------------------路由参数
console.log(this.$router);
}
}
push和go的区别
1.概述与总结
push() 方法和 go() 方法在导航方式、参数传递、生命周期函数等方面有所不同
1） push() 方法会向历史记录中添加一个新的条目，并在浏览器地址栏中显示新的 URL。而 go() 方法则是在历史记录中移动，不会添加新的条目，也不会改变浏览器地址栏中的 URL。
2） push() 方法可以用来跳转到新的页面，而 go() 方法通常用于在页面中进行前进或后退操作
3） push() 方法可以接收一个对象作为参数，用来设置新的路径和查询参数等信息。而 go() 方法只能接收一个整数作为参数，用来指定要前进或后退的步数。正数表示前进，负数表示后退。
4） push() 方法会触发路由的生命周期函数，例如 componentDidMount() 和 componentWillUnmount() 等。而 go() 方法不会触发这些生命周期函数。
2.代码解析
this.$router.push('/detail')
this.$router.go(-1); --------------跳路由的方法
this.$router.back(); -------------------作用相当于 go(-1)，返回上一条路由
this.$router.forward(); --------------作用相当于go(1)，跳下一跳路由
三.路由守卫函数
前置路由守卫函数
1.要点总结（特点，语法，作用）
1） 全局前置路由守卫函数
1> 特点：全局前置路由守卫函数在路由管理对象实例化的位置写，全局前置路由守卫函数
会在跳任何一个路由之前执行
2> 语法：路由管理对象.beforeEach((to,from,next)=>{希望在跳路由之前进行的操作})
参数：
1>> to：去往哪个路由， 这个参数代表路由对象
2>> from：从哪个路由来， 这个参数代表路由对象
3>> next：是个函数， 用来控制路由的跳转。如果在 beforeEach 的回调函数中调
用这个函数，代表允许跳转，如果没有调用，代表不允许跳转（此时页面表现为空
白，跳转不过去，也不会报错）
3> 作用：（通常在这个函数里面进行什么操作）
1>> 动态修改网页标题
2>> 添加进度条动画
3>> 进行鉴权（判断用户是否有跳转页面的权限，有部分页面需要登录才可以跳转，在
这里可以判断页面是否是需要登录才可以跳转的，以及用户是否已经登陆过（是否有
token））
2） 路由独享前置守卫函数
1> 特点：只在添加了该函数的对应路由跳转前执行，需要在对应的路由规则里面写，形式与 children 属性类似
2> 语法：beforeEnter:(to,from)=>{希望在该路由跳转之前执行的操作}
允许路由跳转：在回调函数中条件return true;
不允许路由跳转：在回调函数中添加return false;
内容相同的前置路由守卫函数可以写全局前置路由守卫函数，内容有差别的需要单独写路由独享
2.代码解析
全局前置路由守卫函数
import nProgress from 'nprogress';----------------导入进度条动画库
import "nprogress/nprogress.css";---------------手动导入进度条动画库的样式文件
nProgress.configure({ showSpinner: false });----------关闭圆形加载动画
const router = createRouter({------------实例化路由管理对象
history: createWebHistory(import.meta.env.BASE_URL),-----------设置路由模式: history, hash
routes----------------注册路由配置表
})
router.beforeEach((to,from,next)=>{-----------全局前置守卫路由
document.title = to.meta.title;---------------修改网页标题
nProgress.start();----------------------------开启进度条动画
var token = localStorage.getItem('token');--鉴权( 有访问当前路由的权限,则可以访问, 否则不能访问 )
if( to.meta.requireAuth ){ --------------------需要登录的情况
if( token ){-----------------------已登录，有token
next();-----------------调用next()允许路由跳转
}else{
next('/login');------------未登录，跳转至登录页面，这里还可以用router.push('/login');
}
}else{ ---------------------不需要登录的情况
next();--------------------可以直接允许路由跳转
}
})
路由独享前置守卫函数
{
path:'/index/gwc',
name:'gwc',
meta:{ title:'购物车',requireAuth:true },
beforeEnter:(to,from)=>{----------路由独享的守卫函数
var token = localStorage.getItem('token');
if( to.meta.requireAuth && token ){
return true;---------------允许路由跳转
}else{
return false;-----------------阻止路由跳转
}
},
component: Gwc,
},
后置路由守卫函数
1.要点
全局后置守卫路由：在跳路由完成后执行，可以在这个函数里面设置进度条动画的结束
语法：
路由管理对象.afterEach((to,from)=>{希望在跳完路由执行的操作})（由于此处已经
执行完路由跳转，所以不需要控制是否允许路由跳转的参数 next）
2.代码解析
router.afterEach((to,from)=>{
nProgress.done();------------------停止进度条动画
})
四.vant组件库的应用
1. 安装vant：npm i vant
2. 安装插件：npm i unplugin-vue-components -D
3. 配置插件：
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import {VantResolver} from 'unplugin-vue-components/resolvers';
export default {
plugins:[
vue(),
Components({
resolvers:[VantResolver()],
})
],
};
4. 使用组件：<van-button type='primary'/>（unplugin-vue-components 会解析模板并自动注册对应的组件）
2192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
