导航守卫知识点

1.导航守卫的作用：

进入或者离开页面前做拦截和额外操作（不让进入，不让离开）

类似 拼多多砍价时，当点击退出时，弹出新的页面提醒信息，需要再次点击才能真正的退出

 2.登录：

01 配置api/user.js
02 配置 store/moudules/user.js
    03 页面调用
$store.dispatch(“login”,this.user)

02步骤：

 

3.组件内：

beforeRouteEnter
组件进入前
        to 要进入的页面路由
        from  从哪个页面进入
        next
下一步
            next(true)
放行
            next(false)
不进入
            next(“/login?redirect=/cart”)
跳转到登录，查询参数redirect值是/cart (redirect是自己随便命名的)
可以通过$route.query.redirect 获取当前路由的查询参数redirect的值
        beforeRouteEnter里面没有this（页面都没有进入没有this）
         next(vm => {
    // 通过 `vm` 访问组件实例
  })
    beforeRouteLeave
组件离开前
    beforeRouteUpdate
组件更新前
        product/123
product/456

 4.路由独享：

 beforeEnter（to,from,next）{
}
页面进入（路由配置）

 5.全局引入：

 router.beforeEach((to,form,next)=>{
   // 所有页面进入前执行
   next();
})
    router.afterEach(()=>{
    //所有页面进入后
})

6.全局导航守卫nprogress：

01 安装
 npm install --save nprogress
02 导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
03 自定义颜色
#nprogress .bar {
  background: #f70 !important;
  }
#nprogress .peg {  
  box-shadow: 0 0 10px rgb(226, 173, 17), 0 0 5px rgb(224, 86, 18) !important;
}
04  移除小圆圈加载进度
NProgress.configure({ showSpinner: false });
    router.beforeEach((to,form,next)=>{
   NProgress.start()
  next();
})
    router.afterEach(()=>{
   Nprogress.done()
})

7. Nprogress在request.js应用：

导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
请求拦截
request.interceptors.request.use(function(config){
     NProgress.start()
     return config;
})
响应关闭
request.interceptors.response(function(res){
   NProgress.done()
   return res;
},function(err){
      NProgress.done()
   return err;
})

8.$开头方法(任意组件都可以访问)：

 $refs.xxx
获取dom
<div class="aside" ref="aside">
this.$refs.aside

强制更新数据和视图
$set(name,index,data)

name 要修改的数据
index 数据的下标
data要更新的数

$router路由（方法）
go()
push()
replace（）
back()
forward()
        $router.history.current === $route

当前路由信息 $route

 meta元信息
fullPath全路径
path路径
query 查询参数（？后面的数据）
params 路径参数 
name名称

vuex仓库 $store

dispatch 调用action
commit 调用mutations
state 状态（模块要加模块名）
getters获取器

$nextTick(()=>{})
数据更新
等待dom更新执行回调函数

自定义$方法全局访问main.js

 导入request
import request  from './utils/request'
让每个亣都拥有$request方法
Vue.prototype.$request = request;
        Vue.prototype.$say = function(){
  alert("你好")
}

 8.图片懒加载：

导入
import {lazyLoad} from ‘vant’
使用
Vue.use(lazyLoad)
把图片src替换为v-lazy

9.keep-alive缓存

定义：被keep-alive包裹的组件会被缓存起来（不会销毁）

keep-alive包裹的组件没有声明周期beforeDestory和destoryed声明周期

 keep-alive包裹的组件：
activated  激活生命周期
deactivated 失活生命周期

keep-alive
include 包含组件可以被缓存
exclude 排序哪些组件缓存

通过meta来判断
需要缓存的我页面
添加路由配置meta:{keep:true}
            
App.vue
判断meta控制缓存页面
             

10.meta：

是否显示底部导航栏
meta:{noTabBar:true}
<TabBar v-if="!noTabBar">

是否需要登录进入
meta:{requireAuth}
        router.beforeEach((to,from,next)=>{
   if(to.meta.requireAuth){
        ... 权限判断
    }else{
       next()
    }
})

是否需要缓存
meta:{keep:true}
<keep-alive v-if="$route.meta.keep">