路由进阶

1. 路由模式

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

2. 路由元信息

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

{
    path:'/',
    name:'home',
    meta:{
        title:'首页'
    },
    // 路由组件懒加载
    component:()=>import('../pages/Home.vue'),
}

之后在首页挂载完成之后使后台标题发生变化

<script>
export default {
  mounted() {
    document.title = "首页";
  },
};
</script>

3. 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();
});

4. 路由懒加载

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

5. 路由分组懒加载

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

6. scoped

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

<style scoped>
.car{
    border: 1px solid blue;
    padding: 5px;
}
h2{
    color: pink;
}
</style>

router-link-exact-active 是精确匹配规则，即只有当前点击router被匹配

#nav a.router-link-exact-active {
  color: #42b983;
}

7. sass

安装

npm install sass sass-loader@8 -D

如果出现Error: Cannot find module 'node-sass'
就在终端安装node-sass

npm i node-sass -D

-D是开发依赖

使用

<style scoped lang="scss">
// 使用sass可以定义嵌套定义样式，大大节省css代码
// lang="scss" 就表示下面的样式采用的sass语法编写。
// 使用sass可以定义变量
$red:red;
.about {
  padding: 5px;
  border: 1px solid pink;
  h1 {
    color: chartreuse;
  }
  p {
    color: $red;
  }
  h3 {
    color: $red;
  }
  .prov {
    font-size: 30px;
    color: green;
    .city {
      font-size: 25px;
      color: red;
      .dis {
        font-size: 20px;
        color: skyblue;
        .street {
          font-size: 15px;
          color: purple;
        }
      }
    }
  }
}
</style>

8. less

安装

npm i less less-loader -D

注意：在less里面定义变量的符号是@
报错

npm i less-loader@7 -D
npm i less@3 -D

<style scoped lang="less">
...
</style>