当前位置:   article > 正文

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

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

一.路由懒加载的使用

使用原因

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

二.路由元信息(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,
	            },
	]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

$ 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);
	  }
	}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

push和go的区别

1.概述与总结
   push() 方法和 go() 方法在导航方式、参数传递、生命周期函数等方面有所不同
	1push() 方法会向历史记录中添加一个新的条目,并在浏览器地址栏中显示新的 URL。而 go() 方法则是在历史记录中移动,不会添加新的条目,也不会改变浏览器地址栏中的 URL2push() 方法可以用来跳转到新的页面,而 go() 方法通常用于在页面中进行前进或后退操作
	3push() 方法可以接收一个对象作为参数,用来设置新的路径和查询参数等信息。而 go() 方法只能接收一个整数作为参数,用来指定要前进或后退的步数。正数表示前进,负数表示后退。
	4push() 方法会触发路由的生命周期函数,例如 componentDidMount()componentWillUnmount() 等。而 go() 方法不会触发这些生命周期函数。
	 
2.代码解析
	this.$router.push('/detail')
	this.$router.go(-1); --------------跳路由的方法
	this.$router.back();  -------------------作用相当于 go(-1),返回上一条路由
	this.$router.forward(); --------------作用相当于go(1),跳下一跳路由
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

三.路由守卫函数

前置路由守卫函数

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

后置路由守卫函数

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

四.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 会解析模板并自动注册对应的组件)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/199332
推荐阅读
相关标签
  

闽ICP备14008679号