1. 路由模式

// 路由模式
// 有兩種模式：hash模式（默認(rèn)） 和 history模式
// hash模式，使用的是錨鏈接的原理實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式兼容性非常好；缺點(diǎn)是路徑帶有#號(hào)，不夠美觀。
// history模式，使用的是瀏覽器中內(nèi)置的history對(duì)象實(shí)現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器，刷新后會(huì)丟失路由信息。
mode:'hash'

2. 路由元信息

meta選項(xiàng)，用于配置路由的元信息，里面的內(nèi)容是自定義的，用于配置路由的數(shù)據(jù)

{
    path:'/',
    name:'home',
    meta:{
        title:'首頁(yè)'
    },
    // 路由組件懶加載
    component:()=>import('../pages/Home.vue'),
}

之后在首頁(yè)掛載完成之后使后臺(tái)標(biāo)題發(fā)生變化

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

3. nprogress加載進(jìn)度條

安裝

npm install nprogress

導(dǎo)入

// 導(dǎo)入nprogress
import NProgress from "nprogress";
// 導(dǎo)入nprogress的樣式
import "nprogress/nprogress.css";

在導(dǎo)航守衛(wèi)中使用

// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
  // to 返回去哪里的路由信息
  // from 返回從哪來(lái)的路由信息
  // next方法，用于跳轉(zhuǎn)

  // 開(kāi)啟loading
  NProgress.start();

  // 通常：在這里會(huì)做一些權(quán)限驗(yàn)證操作
  next();
});

// 2.路由后置守衛(wèi)--路由跳轉(zhuǎn)完成
router.afterEach((to, from) => {
  // 通常：在這里會(huì)做一些頁(yè)面的修改操作
  document.title = to.meta.title;

  // 結(jié)束loading
  NProgress.done();
});

4. 路由懶加載

// 路由組件懶加載
component:()=>import('../pages/Home.vue')

5. 路由分組懶加載

// 路由組件分組懶加載
component:()=>import(/* webpackChunkName: "a" */'../pages/News.vue')

6. scoped

app組件中的樣式是全局樣式，通常不加scoped
style標(biāo)簽添加scoped屬性，表示局部樣式，這里定義的樣式 只在當(dāng)前組件中有效

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

router-link-exact-active 是精確匹配規(guī)則，即只有當(dāng)前點(diǎn)擊router被匹配

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

7. sass

安裝

npm install sass sass-loader@8 -D

如果出現(xiàn)Error: Cannot find module 'node-sass'
就在終端安裝node-sass

npm i node-sass -D

-D是開(kāi)發(fā)依賴(lài)

使用

<style scoped lang="scss">
// 使用sass可以定義嵌套定義樣式，大大節(jié)省css代碼
// lang="scss" 就表示下面的樣式采用的sass語(yǔ)法編寫(xiě)。
// 使用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里面定義變量的符號(hào)是@
報(bào)錯(cuò)

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

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