您现在的位置是:首页 >技术教程 >Vue3-黑马(十)网站首页技术教程

Vue3-黑马(十)

dengfengling999 2024-06-17 10:20:00
简介Vue3-黑马(十)

目录:

(1)vue3-antdv-全局提示与校验

(2)vue3-进阶-router-入门

(3)vue3-进阶-router-动态导入-嵌套路由-重定向


(1)vue3-antdv-全局提示与校验

当用户新增修改,没有提示信息,这样是不友好的,因此我们返回一个用户信息,提示信息是在R对象中的message中的

 在响应拦截器中做这个比较合适。request.ts

  

 

 

数据校验:当姓名没有填写,也能添加成功 

 

 

在子组件中定义校验规则:

 

 

 

使用v-bind实现绑定 

 

 

 

 

提交前再做一次校验:

 

 

 这里有一个Bug当加载页面后,先点击新增所有的验证效果都不起作用了

解决问题:ref换掉

 用reactive:reactive跟ref没有value了 ,而且不能直接赋值因为它是常量,必须使用Objec.tassign来赋值

 

 (2)vue3-进阶-router-入门

父组件: A5

前面我们学习的都是在一个页面里每次都使用了一个组件,每使用一个组件都要把原来的组件注释掉,顶多还用到了嵌套子组件,下面我们学习的是在一个页面中,去切换不同的组件,比如使用插连接或改变路径啊,切换到a2去,说白了就是根据浏览器不同的地址切换到不同的地方中去

安装:

vue3对应的版本4

还定义了A51、A52 

 创建:

 

在main.ts引入:

         

 

在父组件中使用router

router显示的位置用router-view控制

 

 

 

(3)vue3-进阶-router-动态导入-嵌套路由-重定向

这种导入时静态的导入,静态导入的缺点是以后打包的话,它会把组件的js代码全部打包成一个大的js,这样组件多的话打包在一个js中,会影响整个页面的加载速度

 

 

 动态导入,一开始是打包的时候不会把这个代码加进来,而是什么时候用到了再去加载 响应的对应的代码,这种叫按需加载动态导入

创建A53组件

 

 在路由中引入:A53路径,实现按需加载 

 

页面中外层是父组件A51,里面有一个显示组件的RouterView对应A51组件 

 

 嵌套路由:

创建A531、A532组件:

 

 添加子路由,在主页路由下面添加:

在主页组件A53中添加子路由显示的标签:

 

 

 

 组件显示:

 

重定向:当输入a3后让他重定向到a3/student下 

 

 

 当输入不存在的路径:

 

 

 

 

 

 

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。