【免费】知识盲点集合笔记记录在这里方便查看资源-CSDN文库

需积分: 0 86 浏览量 2024-05-11 18:12:31 上传评论收藏 11.22MB DOCX 举报

资源推荐

资源详情

资源评论

VUE

1：vue 组件传值

1.1：Vue 父组件给子组件传值，子组件不更新

原因：子组件将父组件传的值做了第一次的变量赋值，当父组件更新时候，子组件没有再一

次做变量赋值，导致变量还是之前的旧值

例如; 父组件 parentData—> 子组件将值赋给给变量 childData，当 parentData 更新，

子组件没有对变量 childData 重新赋值更新导致

解决方案：

方案 1：子组件不进行变量 childData 赋值，直接使用 parentData 渲染视图，就会自动实现

双向绑定【最佳方案】

方案 2：使用 watch 和 computed

Watch 监听 parentData，一旦改变，就跟新 childData 的值

直接吧 childData 作为 computed 属性，return parentData 值

1.2：Vue 兄弟组件传值

 通过父组件作为中转

 通过事件总线—bus 传值

）Bus.js 文件：

import Vue from 'vue'

export default new Vue;

子组件 A

import Bus from "../api/Bus"; //引入 bus

methods: {

a() {

//储存 Bus.$emit

Bus.$emit("bbb", this.aa++); //子组件 A 向子组件 B 传值

}

}

routes: [

1. {

2. path: '/',

3. name: 'Hello',

4. component: Hello,

5. meta: ‘’ // 路由元信息

6. }

7. ]

this.$route：当前激活的路由的信息对象。可以获取当前路由的 path, name, params,

query, hash, fullPath, meta 属性

3.1: $router 对象 push(), replace(), go() 方法

 push()：this.$router.push(), 【push 方法跳转会向 history 栈里添加一个新的记录】，

方便浏览器点击“返回按钮”看到之前页面

 go(): 前进后退 this.$router.go(-1) // 后退

 replace()：this.$router.replace('/')，一般用来做 404 页面，【replace 方法是替换

当前的页面】，不会向 history 栈添加一个新的记录

3.2: router 路由 mode 属性:hash 和 history 模式的区别

Hash: 是 Url 后面带#的部分

比如这个 URL：http://www.abc.com/#/hello， hash 的值为 #/hello。

它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，所以前端路由

修改#中的信息，对后端完全没有影响【请求中仅包含 hash 符号之前的内容】，因此改变 hash

不会重新加载页面。

Hash 原理：通过监听浏览器的 onhashchange()事件变化

history: 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

（需要特定浏览器支持）

这两个方法应用于浏览器的历史记录栈，它们提供了对 “历史记录” 进行修改的功能

（history 的好处是可以进行修改历史记录）。当它们执行修改时，虽然改变了当前的

URL，但浏览器不会立即向后端发送请求。

不怕前进，不怕后退，【就怕刷新，f5，如果后端没有准备的话）,因为刷新是重新向后端

请求整个网址，重新请求服务器的,不玩虚的】，你可以自由的修改 path，当刷新时，如果

服务器中没有相应的响应或者资源，会分分钟刷出一个 404 来。

history 原理：通过 pushState() 和 replaceState()和一个事件 onpopstate 监听 URL 变

化

备注：hash 模一个事件 onpopstate 监听 URL 变化式和 history 模式都属于浏览器自身的

特性

剩余50页未读，继续阅读

内容反馈

JIseven

粉丝: 25
资源: 1

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip