Vue路由守卫

##### 路由守卫

全局守卫：beforeEach   to ：相当于每个组件身上携带的信息

改变引入路由方式 并导出

```
document.tilte= to.meta.title
每个页面都有title了
```

meta中配置项auth：false 意思是不需要登录也能进

true是需要认证

```
if(to.path!="/login"&&to.meta.auth){
//看token是否存在
//不存在跳回那个页面full***：之前的页面

}
```

##### 单页面开发首屏加载慢 白屏(app.js组件大 所以拆分出来

)

1. 路由懒加载：（工作中不用脚手架 一般都已经配完 只需要写东西）

    A.异步组件

   ​       在组件配置项中引入 ，而 import方式是同步

   ```
   component：resolve=>require(["../pages/home/index.vue"],resolve)
   ```

   打包后会拆分出一个

   require可以在页面的任何地方使用

   

   

   B.ES6import（用脚手架 因为当前环境不具备）

   ```
   component：resolve=>import("../pages/home/index.vue")
   ```

   脚手架Vue CLI的使用

   安装

   ```
   cnpm install -g @vue/cli
   ```

   构建项目：新建好文件夹

   ```
   vue create 项目名称
   ```

   ```
   依赖：Babel routerVueX css按空格选择 最后回车
   sass用第一个 选择e.json
   用yarn
   
   
   ```

   vue.config是vue的全局配置项 

   注意 在new Vue中注册router

   $route 是在vm的实例上的 所以不用重引