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

一.路由懒加载的使用

使用原因

javascript 复制代码
1.使用原因
	1) 使用一般写法(即直接填写组件的缺点)
	  当使用这种写法,页面在初次加载会将所有路由配置表的添加的组件一次性全部加载,如
	果项目中组件代码量庞大,就需要很长时间德甲在,如果没有加载完,页面就会一直显示空
	白,而这种情况带来的用户体验很差,所以需要进行优化。
	
	2) 懒加载写法的好处
	  使用这种写法,所有的组件只会在路由地址被访问时才临时加载,当我们初次加载页面也
	只会加载与首页相关的几个文档和组件,加载文档体积小,页面显示的速度会更快,这样就
	提升了用户体验。
	
	3) 项目代码的打包与文件的重新构建(补充点)
	  1> 指令:npm run build
	  2> 目的:为了将开发环境和生产环境分离,以及优化应用程序的性能和加载速度
	  3> 作用:
	    1>> 在开发阶段,我们通常会使用许多工具和库来辅助开发,例如 Webpack、Babel、
	      ESLint 等。这些工具和库可以帮助我们编写高质量的代码、提高开发效率、优化应用
	      程序的性能等。但是,这些工具和库通常会增加代码的体积和复杂度,因此在生产环
	      境中不需要使用它们。
	      
	    2>> 此外,开发环境和生产环境的配置也有所不同,例如调试信息、代码压缩、错误处
	      理等,需要进行不同的设置。因此,我们需要将开发环境和生产环境分离,将开发环
	      境中的工具和库从最终的产品代码中剔除,以提高代码的性能和加载速度。这就是打
	      包构建的作用。
	      
	    3>> npm run build 命令会执行项目中的构建脚本,将源代码转换为可部署的产品代
	      码,并将它们打包成一个或多个文件,以便在生产环境中使用。在打包过程中,我们
	      可以进行代码压缩、优化、分割等操作,以进一步提高应用程序的性能和加载速度。
	   
2.代码解析
	语法:()=>import('组件路径'),
		只有在访问到该路由, 对应的组件才临时加载(下载并运行)
		使用懒加载写法,就不需要在配置表文档引入组件

二.路由元信息(meta)

meta

javascript 复制代码
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的异同

javascript 复制代码
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的区别

javascript 复制代码
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),跳下一跳路由

三.路由守卫函数

前置路由守卫函数

javascript 复制代码
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,
	},

后置路由守卫函数

javascript 复制代码
1.要点
	全局后置守卫路由:在跳路由完成后执行,可以在这个函数里面设置进度条动画的结束
	语法:
		路由管理对象.afterEach((to,from)=>{希望在跳完路由执行的操作})(由于此处已经
	  执行完路由跳转,所以不需要控制是否允许路由跳转的参数 next)
	  
2.代码解析
	router.afterEach((to,from)=>{
	  nProgress.done();------------------停止进度条动画
	})

四.vant组件库的应用

javascript 复制代码
	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 会解析模板并自动注册对应的组件)
相关推荐
拾光拾趣录10 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区20 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到112 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构