day44（（VueJS）路由的懒加载使用路由的元信息（meta）路由守卫函数 vant组件库的应用）

本文主要是介绍day44（（VueJS）路由的懒加载使用路由的元信息（meta）路由守卫函数 vant组件库的应用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一.路由懒加载的使用

使用原因

1.使用原因1） 使用一般写法（即直接填写组件的缺点）当使用这种写法，页面在初次加载会将所有路由配置表的添加的组件一次性全部加载，如果项目中组件代码量庞大，就需要很长时间德甲在，如果没有加载完，页面就会一直显示空白，而这种情况带来的用户体验很差，所以需要进行优化。2） 懒加载写法的好处使用这种写法，所有的组件只会在路由地址被访问时才临时加载，当我们初次加载页面也只会加载与首页相关的几个文档和组件，加载文档体积小，页面显示的速度会更快，这样就提升了用户体验。3） 项目代码的打包与文件的重新构建（补充点）1> 指令：npm run build2> 目的：为了将开发环境和生产环境分离，以及优化应用程序的性能和加载速度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> $router1>> this.$router.push('/detail')2>> this.$router.go(-1)3>> this.$router.back()--------返回上一条路由地址，等同于go(-1)4>> this.$router.forward()--------去到下一条路由地址，等同于go(1)2> $route1>> 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, hashroutes----------------注册路由配置表})router.beforeEach((to,from,next)=>{-----------全局前置守卫路由document.title = to.meta.title;---------------修改网页标题nProgress.start();----------------------------开启进度条动画var token = localStorage.getItem('token');--鉴权( 有访问当前路由的权限,则可以访问, 否则不能访问 )if( to.meta.requireAuth ){ --------------------需要登录的情况if( token ){-----------------------已登录，有tokennext();-----------------调用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 vant2. 安装插件：npm i unplugin-vue-components -D3. 配置插件：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 会解析模板并自动注册对应的组件）