首页 > 其他分享> 文章详细

2021-07-04

2021-07-04 19:04:28 阅读：161 来源： 互联网

标签：resolve 07 04 2021 home router path data 路由

一、Vue CLI

runtime-compiler 和 runtime-only的区别

template -> ast -> render -> vdom -> 真实dom
render:(h) => h, -> createElement

二、Vue-Router

2.1 什么是前端路由

后端渲染、后端路由
- 后端路由：服务器直接生产(jsp)渲染好的html页面，返回给客户端进行展示
前后端分离：ajax
- 后端值提供api来返回数据，后端专注数据的处理，前端通过js将数据渲染到页面
SPA\前端路由：单页面富应用
- 核心是改变url，但是不刷新页面（hash 、history）

2.2 路由的基本配置

安装vue-router
Vue.use -> 创建VueRouter 对象 -> 挂到Vue实例

配置映射关系：

创建组件

配置映射关系

routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: () => import('../views/home/home')
    },
    {
      path: '/cart',
      component: () => import('../views/cart/Cart')//懒加载，提高效率
    }
  ]

使用router-link和router-view
- router-link 标签确定往哪里进行路由
- router-view 类似于占位符

2.3 细节处理

默认路由： redirect重定向
mode: ‘history’ 将默认的hash转为history修改url
- router-link ：
- tag
- replace
- active-class

2.4 动态路由

/use/:id 动态路由
this.$router.params.id 获取动态路由后的参数 id与上面的 :id相对应

2.5 参数的传递

动态路由的params
query -> URL
URL：
- 协议：//主机:端口号/路径/查询
- scheme：//localhost:port/path/query#fragement

2.6 嵌套路由

2.7 keep-alive

3.Promise：解决异步编程的神器

 new Promise((resolve, reject) => {
    setTimeout(()=> {
      resolve('aaa')

    },1000)
  }).then(date=> {
    console.log(date , '处理十行代码');

    return date + '222'
  }).then(data =>{
    console.log(data,'处理二十行代码');

    return data+ '111'
  }).then(data=>{
    console.log(data);
  })

resolve（）执行成功调用后面的then（）方法，参数可以在resolve里面传递到then中

若执行失败可以使用，rejcet（）方法替代resolve，catch（）代替then方法

4、Vuex状态管理模式

4.1 概念：一个集中管理存储所有组件的状态的状态管理器

4.2 官方展示图片：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hahl6GX1-1625395782601)(C:\Users\d’g’f’g\AppData\Roaming\Typora\typora-user-images\image-20210704183824922.png)]

backend：后台

State：不用多说，就是我们的状态。例如：data中的属性

View：视图层，可以针对State的变化，显示不同的信息。

Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

4.3 核心概念

State : 存储属性
Getters：类似computed
Mutation：用于处理同步操作
Action：用于处理异步操作
Module：建立不同的模块，感觉后面开发应该会用到

4.4 可以放在Vuex的状态信息

用户的登录信息、头像、名称、地理位置
商品的收藏、购物车的物品
大型项目，多个状态在多个界面的共享问题

标签：resolve,07,04,2021,home,router,path,data,路由
来源： https://blog.csdn.net/qq_45535307/article/details/118465608

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9