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() 方法在导航方式、参数传递、生命周期函数等方面有所不同
	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
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