首页 > 其他分享 >尚品汇笔记(前台-day2)

尚品汇笔记(前台-day2)

时间:2022-11-02 18:45:41浏览次数:64  
标签:axios day2 尚品 前台 VueRouter 组件 router vuex 路由

犯的错误:
1:项目阶段,左侧菜单目录,只能有项目文件夹
2:联想电脑安装node_modules依赖包的时候,经常丢包。npm install --save axios --force
3:单词错误
4:路由理解
KV:K--->URL V---->相应的组件
配置路由:
------路由组件
-----router--->index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//对外暴露VueRouter类的实例
export default new VueRouter({
routes:[
{
path:'/home',
component:Home
}
]
})
------main.js 配置项不能瞎写





$router:进行编程式导航的路由跳转
this.$router.push|this.$router.replace
$route:可以获取路由的信息|参数
this.$route.path
this.$route.params|query
this.$route.meta





1)编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误?
注意:编程式导航(push|replace)才会有这种情况的异常,声明式导航是没有这种问题,因为声明式导航内部已经解决这种问题。
这种异常,对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router最新版本3.5.2,引入了promise,当传递参数多次且重复,会抛出异常,因此出现上面现象,
第一种解决方案:是给push函数,传入相应的成功的回调与失败的回调
第一种解决方案可以暂时解决当前问题,但是以后再用push|replace还是会出现类似现象,因此我们需要从‘根’治病;





2)将Home组件的静态组件拆分
2.1静态页面(样式)
2.2拆分静态组件
2.3发请求获取服务器数据进行展示
2.4开发动态业务
拆分组件:结构+样式+图片资源
一共要拆分为七个组件





3)axios二次封装
AJAX:客户端可以'敲敲的'向服务器端发请求,在页面没有刷新的情况下,实现页面的局部更新。
XMLHttpRequest、$、fetch、axios
跨域:如果多次请求协议、域名、端口号有不同的地方,称之为跨域
JSONP、CROS、代理
2.1:工作的时候src目录下的API文件夹,一般关于axios二次封装的文件
2.2进度条:nprogress模块实现进度条功能
工作的时候,修改进度条的颜色,修改源码样式.bar类名的





4)vuex:今晚务必vuex复习一下
vuex:Vue官方提供的一个插件,插件可以管理项目共用数据。
vuex:书写任何项目都需要vuex?
项目大的时候,需要有一个地方‘统一管理数据’即为仓库store
Vuex基本使用:

标签:axios,day2,尚品,前台,VueRouter,组件,router,vuex,路由
From: https://www.cnblogs.com/wh024/p/16851970.html

相关文章

  • ParaView中实现远程渲染与前台显示的对接
    pqViewFrame*pqMultiViewWidget::newFrame(vtkSMProxy*view){pqViewFrame*frame=newpqViewFrame();QObject::connect(frame,SIGNAL(buttonPressed(int)),th......
  • [JAVA]Springboot添加fastjson用于前台数据校验
    方式一,添加HttpMessageConverters实例importcom.alibaba.fastjson.support.config.FastJsonConfig;importcom.alibaba.fastjson.support.spring.FastJsonHttpMessage......
  • day23 JSONP讲解
    同源策略(浏览器的一种机制)概述:浏览器为了安全,他产生一种同源策略,这个策略是为了防止一些恶意的请求,保护对应的隐私。同源策略主要是对应三个内容分别为同协议(http/h......
  • day23 同源策略及JSONP
     同源策略(浏览器的一种机制)概述:浏览器为了安全,产生的一种同源策略,这个策略是为了防止一些恶意的请求,保护用户的隐私.同源策略主要有三个内容,分......
  • day23 JDBC(Java Database Connection)连接 与 通配符与插入返回主键
    JDBC配置connector的jar包1.项目下新建lib文件夹2.将mysql-connector-java-版本号.jar复制到lib目录下3.右键项目名,选择Properties选项4.点击AddJARS...,选中刚复制的j......
  • day23JSONP
    同源策略(浏览器的一种机制)概述:为了确保浏览器的安全而产生的一种同源策略,为了防止一些恶意的请求和保护对应的隐私同源策略对应的三个问题 同协议(http/https)同ip地址......
  • Java学习笔记day2--循环结构
    **循环结构包括四个部分:初始化部分循环条件部分循环体部分迭代部分1>for循环for(初始化部分;循环条件部分;迭代条件......
  • Java学习笔记day2——循环结构综合例题(1个)
    //循环语句综合例题/*例题1:从键盘读入个数不确定的整数,并判断读入的正数和负数的个数,输入为零时,结束程序。*/......
  • Java学习笔记day2--分支结构之switch
    /*switch(表达式){case常量1:语句1;//break;case常量2:语句2;//break;……default:语句;//break;说明:1.按......
  • java_day23~24
    Java基础GUI编程核心技术:Swing、AWT现在GUI并不流行因为其界面不美观、需要依赖jre环境SwingpublicclassDemo1{//init();初始化publicvoidinit(){......