插槽
让父组件可以向子组件指定的位置插入html结构，也可以用于父组件向子组件通信
1：默认插槽
2：具名插槽
<slot name='xxx'><slot>
<div slot='xxx' ><div>
这样就会把div标签的内容放到对应的插槽内，只要两个名字能对应上就可以自己找到合适的位置去展示
<template v-slot:xxx></template>使用template可以把整个被包裹的内容替换或显示，但是v-slot只能配合template使用
3：作用域插槽
<slot :xxx='xxx'><slot> 此时数据在slot所对应的组件中，通过v-bind把数据可以传到需要slot的组件中
<template slot-scope='xxx'></template> 此时的xxx旧已经有了slot所对对应的数据了，可以使用以及遍历
vuex
在vue中实现集中式数据管理的插件，对vue中多个组件共性的数据进行管理，可以实现任意组件件的通信
多个组件依赖于同一数据
不同的组件的行为需要变更同一数据
前端路由
一个路由就是一组映射关系，多个路由需要路由器进行管理
前端路由时由key：value组成的，key是路径，value是组件
路由组件一般存放在pages文件夹中，非路由组件放在components文件夹中
切换路由被隐藏的路由是被销毁了
每个路由都由自己的route属性
1：import Vue from 'vue' 引入vue
2：import VueRouter from 'vue-router' 引入vueRouter
3：Vue.use(VueRouter) 调用vue.use()函数，把VueRouter 安装为vue的插件
4：const routes = [
path：'/路径名',
component:组件名，
]
const router = new VueRouter({
routes
})
5：export default router 导出路由实例对象
6：在main.js文件夹中导入router；import router from './router'
7：挂载路由实力对象；
new Vue({
router,
render: h => h(App)
}).$mount('#app')
8：在组件中用来代替a链接跳转地址
在组件中用来占位
路由重定向
强制用户跳转到一个路由
paht:'/',
redirect:'重定向页面'
路由嵌套
一个组件中又有其他子级路由，
在组件中用来指定子级路由的跳转地址
在组件中用来占位
在router文件中用children:[
{
path:'子路由地址'，路径前面不用加斜线
component:子组件名，
}
]
动态路由
1:路由跳转的时候携query带参数,字符串写法
query参数，在路径后面加?再加上key:value值,多个key:value用&相连
<router-link :to="`/xxx/xxx/xxx?id=${xxx}&id2=${xxx}`">{{xxx}}</router-link>
那么再需要参数的组件中可以这样取
<div>{{$route.query.id}}</div>
<div>{{$route.query.id2}}</div>
使用：绑定to属性，路径前面用模板字符串包裹起来
1:路由跳转的时候携query带参数，对象写法
<router-link :to="{path:'/xx/xx/xx',query:{id:xxx,id2:xxx}}">{{xxx}}</router-link>
那么再需要参数的组件中可以这样取
<div>{{$route.query.id}}</div>
<div>{{$route.query.id2}}</div>
2：路由跳转的时候携params带参数,字符串写法
携带params参数首先要在路由配置中在path后面用冒号来占位
path:'/路径地址/:id1/:id2'
然后在组件中配置可以直接配置value。不用再配置key'
<router-link :to="`/xxx/xxx/xxx/id1/id2`">{{xxx}}</router-link>
那么再需要参数的组件中可以这样取
<div>{{$route.params.id1}}</div>
<div>{{$route.params.id2}}</div>
2：路由跳转的时候携params带参数,对象写法
<router-link :to="{path:'/xx/xx/xx',params:{id:xxx,id2:xxx}}">{{xxx}}</router-link>
注意这里如果携带params参数。而且使用对象的写法，路径不允许使用path:/xxx/xxx这种写法，需要用name:'xxx'来代替path的写法
路由的命名
可以简化路由的跳转，不如二三级路由地址需要携带前面的父级路由地址，这样路径就会过长，如果使用name的话就会简单很多，但是不可以把name直接写在to后面，需要写在对象里面用key:value的形式
<router-link :to="{name:'xxxx'}">{{xxx}}</router-link>
前提是需要在路由规则里面提前写好name的名字
路由的props属性
在路由配置中谁需要接收值就给谁配置props属性，
1：第一种方法是对象写法；props:{key:value} 很少使用
2:第二种写法props:true 如果布尔值为真就会把该路由组件收到的所有params参数以props的形式传递给该组件
3;第三种写法；props($route){
return {id:'route.query.id1',}
}
再该组件内再用props接收返回的数据props:['id','id1']
路由的replace和push
replace
<router-link replace to='/组件路径地址'></router-link>
这种方式是开启replace模式，这样的情况下是不可以回退的，路径更新会替换掉上一次的路径
push
是追加历史记录，可以回退，也是默认的跳转方式
<router-link push to='/组件路径地址'></router-link>
可以直接写replace或者不写
编程式路由导航
现在标签中写好点击事件
在methods中定义
methods(){
自定义事件名(){
this.$router.push({
里面写路径name:"'路径name'
query:{ 这里是需要携带参数的情况下
xx:xx xx:xx
}
})
}
}
路由的前进与后退
this.$router.back()后退
this.$router.forward()前进
this.$router.go()正数为前进1，负数为后退
缓存路由组件
<keep-alive include='要被缓存的组件名'>
<router-view><router-view>
</keep-alive>
把router-view用keep-alive包裹起来，这样不会因为组件的切换而被销毁，但是有些组件不是必须的，所以只需要把想要被缓存的组件写在include中就可以被缓存起来了，
如果不写就会默认所有的都缓存如果由多个可以用数组的方法 :include'[xxx,xxx]'
路由生命周期
activated(){}路由组件激活时触发
deactivated(){}路由组件失活时触发
路由守卫
全局前置路由守卫
//设置路由导航守卫，初始化和每次路由切换的时候被调用
如果需要权限的校验需要在路由组件中配置一个meta属性
path: '/',
name: 'xxx',
component: xxxxx,
meta:{是否需要校验:true}
router.beforeEach((to, from, next) => {
if(to.meta.是否需要校验){
}
// to要去的页面 from从哪里来 next放行
})
全局后置路由守卫
每次路由被切换后调用
router.afterEach((to, from) => {
})
独享路由守卫
在路由组件内每个路由配置内进行配置，
beforeEnter: (to, from, next) => {
// ...
}
对某个单独的路由组件进行校验限制
组件内守卫
通过路由规则进入该组件时被调用
beforeEnter: (to, from, next) => {
}
通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {
// ...
}
history和哈希模式
默认是哈希模式，就是地址栏带#；在路由配置中用mode:'history'来修改成为history模式，
\
