2021-12-15 路由懒加载 & scoped & sass & less & 路由模式 & 路由元信息

一、路由懒加载

1、用路由懒加载的好处

使用路由懒加载后，在vue服务第一次加载时压力小一些，不会出现超长首页白屏问题。

2、怎么写路由懒加载

路由懒加载

// 路由组件懒加载
component:()=>import('../pages/Home.vue')

路由分组懒加载

// 路由组件分组懒加载
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')

未使用路由懒加载：使用import在一开始将组件直接引入，在component导入

const routes = [
  {
    path: '/',
    name: 'Home',
    // 路由组件懒加载
    //component:()=>import('../views/Home.vue')
    // 路由分组懒加载
    component:()=>import(/* wepackChunkName:"a" */'../views/Home.vue')
  },

二、scoped

/* 注意：App组件中的样式是全局样式，通常不加scope */
scoped属性，用于设置局部样式，当前组件中的样式只对当前组件生效

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

三、sass

安装

npm install sass sass-loader@8 -D

使用

sass的一个用法：嵌套定义样式
使用sass 可以定义变量

<style scoped lang="scss">
// lang="scss" 就表示下面的样式采用的sass语法编写。
// 定义变量
//&符号表示当前元素

 $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:blue;
    font-size: 30px;
  }
  .district{
      color: green;
      font-size: 30px;
  }
  .street{
      color: yellow;
      font-size: 30px;
   }
  }

  h2{
  color: green;
  }

四、less

<style scoped lang="less">
// 注意：在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>

五、路由模式

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

六、路由元信息

{
    path:'/',
    name:'home',
    // meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
    meta:{
        title:'首页'
    },
    // 路由组件懒加载
    component:()=>import('../pages/Home.vue'),
}

七、nprogress加载进度条

安装

npm install nprogress

导入

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

在导航守卫中使用

// 导航守卫
// 1.路由前置守卫--路由跳转之前
router.beforeEach((to, from, next) => {
  // to 返回去哪里的路由信息
  // from 返回从哪来的路由信息
  // next方法，用于跳转

  // 开启loading
  NProgress.start();

  // 通常：在这里会做一些权限验证操作
  next();
});

// 2.路由后置守卫--路由跳转完成
router.afterEach((to, from) => {
  // 通常：在这里会做一些页面的修改操作
  document.title = to.meta.title;

  // 结束loading
  NProgress.done();
});

八、二级路由

//配置子路由信息
children:[
    //手机订单路由
    {
        path:'phoneOrder',
        name:'phoneOrder',
        meta:{
            title:'手机订单'
        },
        component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
    }
]

九、路由缓存

1. keep-alive组件

keep-alive组件，用于对路由视图进行缓存；include属性指定缓存的组件，
该属性可以传一个数组，数组中定义组件的名称。

keep-alive用于缓存路由组件，默认情况下会缓存打开的所有组件，
如果需要指定缓存哪些组件，通过include属性指定。
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>

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

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