Vue2 Help

路由

动态路由带参

路由: { path: ‘/user/:id’, component: User }
跳转：this.$router.push({path: `user/${id}` })

动态路由和静态路由

动态路由：登录前没有路由设置，登录后根据权限从接口获取路由数据并设置。
静态路由：所有路由在项目初始化就设置

404

path: * 或者 path： ‘404’ 用来表示404页面

父子组件传值

注意：父组件的attribute来接受子组件传来的方法时，绑定的方法不能带小括号

<fromSon @parentData="method1()"></fromSon>  //不可以带括号

父组件传值子组件

1、 父组件：   :msg='父组件的值'  子组件： props:['msg']
2、 父组件： this.$children
3、 父组件： this.$refs

子组件传值父组件

1、子组件：  this.$emit('msg','子组件的值');  父组件： @msg='childrenMsg'  childrenMsg(value){}//value即'子组件的值'
2、子组件： this.$parent

props和components

// 只能是object
components:{
	childComponents 或者 child:childComponents
} 
// 可以是object也可以是array
// 如果props和data同名，props优先级大于data
props:{
	'fatherMsg':{
		type:String,
		default:'字符串',
		required:true
	}
}
props:{ 'fatherMsg': String }
props:['fatherMsg']

$router和$route区别

$router是一个全局的对象，包括所有的路由。常用的api有：$router.push、$router.go、$router.replace(replace常用于404页面)。

跳转传参：{name:‘user’,query:{username:admin}}；{path:‘user/login’,param:{username:admin}}。 query传参会带在url后一般是get，params不会带在url后，一般是post；无论是params还是query传参都可以使用name跳转；但是由于动态路由也是传递params的(比如/user/:id，就是通过$route.params来获取id的)，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。
$route是当前页面对应的路由

路径	用途
$route.path	当前路由对象的路径，会被解析为绝对路径，如/user/login
$route.params	键值对，不会拼接到路由的url后面
$route.query	包含路由中查询参数的键值对。会拼接到路由url后面
$route.router	路由规则所属的路由器
$route.matched	包含当前匹配的路径中所包含的所有片段所对象的配置参数对象
$route.name	当前路由的名字，如果没有使用具体路径，则名字为空

watch和computed

watch

页面首次加载不会自动执行除非配置immediate、一个属性影响多个属性、无缓存、监听的值必须是data或者父组件传过来的值、支持异步操作

例子：搜索框

watch(){
	//写法一
	num1(newvalue,oldvalue){	// newvalue 更新后的值 oldvalue更新前的值}
	//写法二
	num1:{
		immediate:true,
		deep:true,
		handler(newvalue,oldvalue){}
	}
}

computed

页面首次加载——beforeMount之后,mounted之前自动执行一次、一个属性被多个属性影响、有缓存值、不能和data和父组件传过来的值同名、不支持异步有异步无法监听数据变化

例子：购物车结算

computed:{
	num2(){ 
		return num1 * 2 
	}
}

watch和computed与生命周期的执行顺序

• 如果不是由事件造成的数据变化，执行顺序为：watch——beforeUpdate——computed——updated
• 如果是由事件造成的数据变化，执行顺序为：methods——watch——beforeUpdate——computed——updated

兄弟组件传值

方法一

main.js
Vue.prototype.bus = new Vue()

兄弟组件
this.bus.$emit(‘send’,‘message’)
接受的兄弟组件
this.bus.$on(‘send’, msg => { console.log(msg) })

方法二

import vue from 'vue'
export default new Vue()

兄弟组件
import bus from ‘./bus.js’
bus.$emit(‘send’,‘message’)
接受的兄弟组件
import bus from ‘./bus.js’
bus.$on(‘send’, msg => { console.log(msg) })

mapState、mapGetter(写法一样)

…mapState[‘state1’,‘state2’] / …mapState[{ State: state }, { State1: state1 }]
具体使用链接: https://juejin.cn/post/6928468842377117709 ！！！！！

localStorage和sessionStorage同一网站下的共享问题

同源策略

同源策略：协议、域名、端口完全一致。即使是两个域名指向同一ip，例如：192.168.0.70和docim.com指向同一ip但是域名不同所以不同源。

sessionStorage

情况一

在同源状态下下，网页A中打开网页B，此时B的session会复制A的session。但是这两个网页的session的改动不会被相互影响

方法一
window.open()
方法二(必须使用rel=’opener‘这个属性)
<a href="xxx" target="_blank" rel="opener"> </a>

情况二

在A页面存在的情况下，重新手动打开一个标签页B，此时两个页面sessio互不影响并且B的session会重新生成。新开标签页总会初始化一个新的 session

localStorage

在同源状态下，同源标签页的localStorage均可读写并相互影响

export和export default

export

方法一
export function menuList(){}
export var a = '1'
import { menuList, a } from './test.js'

方法二
function menuList(){}
export { menuList as list } 
import { list as menu } from './test.js'

导入时整体加载
import * as test from './test.js'
可以使用'test.a'  'test.menuList'访问模块变量

错误写法
// export必须提供对外的接口，这种写法相当于直接输出1 等价于 export 1
var a = 1
export a  

// 和上面直接输出1是一样的
function menuList(){}
export menuList 

总结
一、'export'导出必须使用大括号包裹，对外接口名和封装模块的方法名必须保持一致。
二、推荐使用方法二的写法，能一目了然的看到导出的是那些变量
三、导入的时候必须使用大括号，导入的变量名和对外接口名也要保持一致
四、导出和导入的变量都可以起别名

export default

方法一
function menuList(){}
const a = 1
export default {menuList, a}
import menuApi from './test.js'
通过 'menuApi.a', 'menuApi.menuList'访问

方法二
export default menuList(){}
import menuApi from './test.js'

错误写法
// export default的本质是将后面的变量赋值给default
export default var a = 1 
// 默认导出只有一个  所以不能加大括号
import { menuList } from './test.js'

总结
一、导出的时候可以使用大括号也可以不用
二、每个模块只能有一个'export default'
三、导入名字可以随意更改但不能使用大括号
四、导出和导入的变量都可以起别名

前端缓存之强制缓存和协商缓存

中高级前端工程师都需要熟悉的技能–前端缓存