四、路由进阶

1.路由模式

路由模式有两种：hash模式（默认）和 history模式。
hash模式：使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
history模式：使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。

const router = new VueRouter({
  mode:'hash',
  routes
})

2.路由元信息

meta选项：用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据。

{
    path:'/',
    name:'home',
    meta:{
        title:'首页',
        //  可以在路由元信息里面配置路由的访问权限
        roles:['admin','vip','user']
    },
    // 路由组件懒加载
    component:()=>import('../pages/Home.vue'),
}

3.导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。其实，导航守卫就是路由跳转过程中的一些钩子函数。
(1)前置守卫--路由跳转之前
使用 router.beforeEach 注册一个全局前置守卫。
每次跳转路由之前，都会拦截，next方法表示下一步。
通常在这里会做一些权限验证操作。
to：返回去哪里的路由信息
from：返回从哪来的路由信息
next方法：用于跳转

router.beforeEach((to,from,next)=>{
  // 获取浏览器的缓存中，保存的当前登录用户的权限
  let role = sessionStorage.getItem('role')
  // 验证用户访问权限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表示继续向下执行
    next()
  }
})

(2)后置守卫--路由跳转完成
使用 router.afterEach 注册一个后置守卫。通常在这里会做一些页面的修改操作

router.afterEach((to,from)=>{
  // 配置当前页的标题
  document.title = to.meta.title
})

( ﹁﹁ ) ~→到这里都在路由配置文件router/index.js下操作配置

4.nprogress加载进度条

nprogress是页面跳转时出现在浏览器顶部的进度条。

(1) 安装
npm install nprogress

(2) 导入

// 导入nprogress
import NProgress from "nprogress";
// 导入nprogress的样式
import "nprogress/nprogress.css";

(3) 在导航守卫中使用

// 导航守卫
// 1.路由前置守卫--路由跳转之前
router.beforeEach((to, from, next) => {
  // 开启loading
  NProgress.start();
  // 通常：在这里会做一些权限验证操作
  next();
});
// 2.路由后置守卫--路由跳转完成
router.afterEach((to, from) => {
  // 通常：在这里会做一些页面的修改操作
  document.title = to.meta.title;
  // 结束loading
  NProgress.done();
});

5.二级路由

需要先定义一级路由组件，确定好在哪个组件中配置二级路由，就去那个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则。

  {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定义one的二级路由信息
    children:[
      {
        path:'nj',
        name:'nj',
        // 采用路由懒加载的方式，导入组件
        component:()=>import('../views/city/Nj.vue'),
        meta:{
          title:'南京'
        }
      },
      {
        path:'sz',
        name:'sz',
        component:()=>import('../views/city/Sz.vue'),
        meta:{
          title:'深圳'
        }
      }
    ]
  },

App.vue

<router-link to="/">Home</router-link> |
<router-link to="/one">One</router-link> |
<router-link to="/two">Two</router-link> |
<!-- 该路由视图，匹配一级路由 -->
<router-view></router-view>

One.vue

<router-link to="/one/nj">南京</router-link> | 
<router-link to="/one/sz">深圳</router-link> |
<!-- 这里的路由视图，匹配one的二级路由 -->
<router-view></router-view>

6.路由懒加载

采用路由懒加载，加载路由组件，提高首屏性能。首页组件加载速度更快一些，是为了给客户更好的体验。
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
component:()=>import('../pages/Home.vue')

7.路由分组懒加载

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name。
路由组件分组懒加载，在component属性中添加如下注释，
其中"a"是分组标签，哪些页面需要同一个组就加相同的注释。
component:()=>import( /* webpackChunkName: "a" */ '../pages/News.vue')

component: ()=>import(/* webpackChunkName: "a" */'../views/Home.vue')
component: () => import(/* webpackChunkName: "a" */'../views/About.vue')
component: () => import(/* webpackChunkName: "b" */'../views/One.vue')
component: () => import(/* webpackChunkName: "b" */'../views/Two.vue')

8.scoped

给style标签添加scoped属性，表示局部样式，这里面定义的样式，只在当前组件中有效，App全局组件中，是全局样式，通常不加scoped

<style scoped>
    ....
</style>

9.sass

Sass 是一个 CSS 预处理器。
使用sass可以定义嵌套定义样式，大大节省css代码，
使用sass可以定义变量，可以统一定义风格。
使用$red来定义red，然后在下面用到该颜色的地方使用$red，以后可以统一修改。
(1) 安装
npm install sass sass-loader@8 -D
(2) 使用

<div class="one">
    <h2>One</h2>
    <div class="province">
      江苏省
      <div class="city">
        南京省
        <div class="district">
          雨花台区
          <div class="street">赛虹桥街道</div>
        </div>
      </div>
    </div>
    <h3>南京的鸭血粉丝真好吃</h3>
    <p>南京的盐水鸭真好吃</p>
</div>

<style scoped lang="scss">
$red:darkred;
.about{
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: $red;
  }
  p{
    color: $red;
  }
  .province{
    color: $red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

10.less

less 也是一个 CSS 预处理器，在less里面定义变量的符号是@。
(1) 安装
npm i less@3 -D
npm i less-loader@7 -D
(2) 使用

<style scoped lang="less">
@red:darkred;
.one {
  border: 1px solid black;
  padding: 5px;
  h2{
    color:black;
  }
  h3{
    color: @red;
  }
  p{
    color: @red;
  }
  .province{
    color: @red;
    font-size: 30px;
    .city{
      color: green;
      font-size: 25px;
      .district{
        color: blue;
        font-size: 20px;
        .street{
          color: orange;
          font-size: 15px;
        }
      }
    }
  }
}
</style>

五、路由缓存

1.keep-alive组件

keep-alive：用于缓存路由组件，默认情况下会缓存打开的所有组件。
如果需要指定缓存哪些组件，通过include属性指定，该属性可以传一个数组，数组中定义组件的名称。
:include属性是个数组的形式绑定，绑定的名称是每个组件中name的名称
作用：通过路由缓存，组件之间的切换就能保存上个组件的状态，而不是切换之后又得重新操作。

<keep-alive :include="['Two','Three']">
  <router-view/>
</keep-alive>

2.路由组件特有的两个生命周期

当路由组件采用缓存后，created和mounted这两个生命周期函数，只会在第一次执行；并且destroyed这个生命周期函数不会执行。
这时候，通常都会配合以下两个生命周期钩子。
路由组件激活状态生命周期函数
activated(){}
路由组件失活状态生命周期函数
deactivated(){}

注意：只有当组件在 <keep-alive> 内被切换，才会有activated 和 deactivated 这两个钩子函数。

    // 路由组件激活状态生命周期函数
    activated() {
        console.log('路由组件激活');
        // 开启定时器
        this.timer = setInterval(()=>{
            this.count++
        },1000)
    },
    // 路由组件失活状态生命周期函数
    deactivated() {
        console.log('路由组件失活');
        clearInterval(this.timer)
    }

(Vue-cli)四、路由进阶（二级路由&路由懒加载&scoped&sass） + 五、路由缓存（keep-alive&路由组件的激活/失活生命周期）