一、路由傳參

1. params 參數(shù)

（1）params 參數(shù)

路由配置

{
    // 注意：這里的路由需要傳一個參數(shù)晤郑，路由可以傳多個參數(shù)
    // 如果是多個參數(shù)敌呈，可以寫 /type/:id/:name
    path:'/type/:id',
    // 設(shè)置該選項為true，組件可以通過props選項接收路由參數(shù)
    props:true,
    component:Type
}

頁面

<router-link to="/type/1001">南京</router-link>
<router-link to="/type/1002">無錫</router-link>

<h2>{{ city.name }}</h2>
<p>{{ city.content }}</p>

// 使用props選項接收路由參數(shù)
props:["id"],
  data() {
    return {
      city: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "南京",
          content: "南京的鹽水鴨真好吃"
        },
        {
          id: 1002,
          name: "鎮(zhèn)江",
          content: "鎮(zhèn)江的鍋蓋面真好吃"
        }
      ],
    };
  },
  methods: {
    getData() {
      this.city = this.list.find((r) => r.id == this.id);
    },
  },
  created() {
    // $route返回的是當(dāng)前路由信息造寝，它身上有一個params屬性磕洪，該屬性里面保存的是當(dāng)前路由信息的參數(shù)。
    // 這種方法無法更新路由頁面 
    // let {params: { id }} = this.$route;
    // this.city = this.list.find((r) => r.id == id);
  },
  watch: {
    // 監(jiān)視id的變化
    id: {
      immediate: true,
      handler() {
        this.getData();
      },
    },
  },

（2）v-html指令

v-html指令诫龙，可以渲染富文本內(nèi)容（包含html信息的內(nèi)容）析显。
v-text指令，渲染文本內(nèi)容赐稽。
當(dāng)需要渲染的數(shù)據(jù)是html內(nèi)容時叫榕，使用v-html指定。

<!-- 所有由ref修飾的組件或標(biāo)簽姊舵，都會保存到$refs中 -->
<!-- <div ref="content"></div> -->
<!-- v-html指令晰绎，用于渲染html內(nèi)容 -->
<div v-html="city.content"></div>
<!-- v-text指令，用于渲染文本內(nèi)容 -->
<!-- <div v-text="city.content"></div> -->

  data() {
    return {
      city: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "南京",
          content: `
             <ul>
                <li>南京的鹽水鴨真好吃</li>
                <li>南京的老門東真好玩</li>
             </ul>
          `,
        },
        {
          id: 1002,
          name: "鎮(zhèn)江",
          content: `
             <div>
                <button>鎮(zhèn)江</button>
                <img src="https://img0.baidu.com/it/u=4141467167,4004418012&fm=26&fmt=auto">
             </div>
          `,
        }
      ],
    };
  },
mounted() {
    this.$refs.content.innerHTML = this.city.content
},

效果：點擊城市名切換對應(yīng)信息

2括丁、query參數(shù)

路由地址荞下，采用query傳參方式：?參數(shù)1=XXX&參數(shù)2=XXX

<router-link to="/news?id=1001">一坡一嶺，護(hù)好美麗中國鮮明底色</router-link>
<router-link to="/news?id=1002">劉詩詩陳妍希一起練瑜伽</router-link>

<div class="news">
  <h2>{{ news.name }}</h2>
  <div v-html="news.content"></div>
</div>

  data() {
    return {
      news: {
        id: 0,
        name: "",
        content: "",
      },
      list: [
        {
          id: 1001,
          name: "一坡一嶺，護(hù)好美麗中國鮮明底色",
          content: `
             <div>
                梯田層層繞山腰尖昏，五谷瓜果栽滿溝仰税，陜西省米脂縣銀州街道高西溝村，昔日荒山換新顏抽诉。
             </div>
          `,
        },
        {
          id: 1002,
          name: "劉詩詩陳妍希一起練瑜伽",
          content: `
             <div>
                <p>與眾好友一起拍照的劉詩詩陨簇，扎著丸子頭蜷著腿率性地坐在瑜伽墊上，只見她一手撐地一手比耶迹淌，心情看上去十分不錯河绽。</p>
                <img src="https://inews.gtimg.com/newsapp_bt/0/14290991287/1000">
             </div>
          `,
        }
      ],
    };
  },
  methods: {
    getData(){
      let { query: { id } } = this.$route;
      this.news = this.list.find((r) => r.id == id);
    }
  },
  watch: {
    $route: {
       immediate:true,
       handler(){
         this.getData()
       }
    }
  },

效果：點擊新聞標(biāo)題切換對應(yīng)信息

3、$router和$route

$router返回的是當(dāng)前項目中的路由器對象唉窃。
$route返回的是當(dāng)前路由信息耙饰。

4、vue.config.js

vue.config.js 是一個可選的配置文件纹份，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件苟跪，那么它會被 @vue/cli-service 自動加載。

// 引入nodejs內(nèi)置模塊path
let path = require('path')
// 注意：該配置文件中蔓涧，只能使用commonjs模塊化語法
module.exports = {
    // 關(guān)閉 eslint-loader 語法檢查
    lintOnSave:false,
    // 配置devServer開發(fā)服務(wù)器
    devServer:{
        // 端口號
        port: 5566,
        // 自動打開
        open:true,
        // 靜態(tài)資源路徑
        // 注意：__dirname是nodejs的內(nèi)置變量件已，返回的是的當(dāng)前項目的絕對路徑
        // contentBase: path.join(__dirname, "static")
    },
    // 用于配置原生的Webpack配置
    configureWebpack:{
        // 解析
        resolve:{
            // 定義路徑別名
            alias:{
                "@c":path.resolve(__dirname,'src/components'),
                "@p":path.resolve(__dirname,'src/pages'),
                "@a":path.resolve(__dirname,'src/apis'),
                "@u":path.resolve(__dirname,'src/utils'),
            }
        }
    }
}

二、添加路由

1元暴、路由規(guī)則redirect屬性重定向

redirect屬性：進(jìn)行重定向URL地址拨齐。

{
    path:'/index',
    // 重定向到指定的路由/home
    redirect:'/home'
},

2、添加404路由

// *號昨寞，表示匹配不上的所有路由（未配置的所有路由地址）
{
    path:'*',
    component:Error404
}

3、命名路由

命名路由：在routes配置中給某個路由設(shè)置名稱厦滤。
在跳轉(zhuǎn)路由時援岩，可以根據(jù)路由的名稱(name)去跳轉(zhuǎn)。

（1）params參數(shù)

{
    name:'type',
    path:'/type/:id',
    props:true,
    component:Type
}

頁面

<router-link :to="{name:'type',params:{id:1001}}">南京</router-link>
<router-link to="/type/1002">無錫</router-link>

（2）query參數(shù)

{
    name:'news',
    path:'/news',
    component:News
}

頁面

<router-link :to="{name:'news',query:{id:1001}}">一坡一嶺掏导，護(hù)好美麗中國鮮明底色</router-link>
<router-link to="/news?id=1002">劉詩詩陳妍希一起練瑜伽</router-link>

三享怀、路由進(jìn)階

1、路由模式

路由模式有兩種：hash模式（默認(rèn)） 和 history模式趟咆。
hash模式：使用的是錨鏈接的原理實現(xiàn)路由的跳轉(zhuǎn)添瓷，這種方式兼容性非常好；缺點是路徑帶有#號值纱，不夠美觀鳞贷。
history模式：使用的是瀏覽器中內(nèi)置的history對象實現(xiàn)路由的跳轉(zhuǎn)，這種方式不兼容老版本的瀏覽器虐唠，刷新后會丟失路由信息搀愧。

mode:'hash'

2、路由元信息

meta選項：用于配置路由的元信息，里面的內(nèi)容是自定義的咱筛，用于配置路由的數(shù)據(jù)搓幌。

{
    path:'/',
    name:'home',
    meta:{
        title:'首頁',
        //  可以在路由元信息里面配置路由的訪問權(quán)限
        roles:['admin','vip','user']
    },
    // 路由組件懶加載
    component:()=>import('../pages/Home.vue'),
}

3、導(dǎo)航守衛(wèi)

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航迅箩。其實溉愁，導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)過程中的一些鉤子函數(shù)。

（1）前置守衛(wèi)--路由跳轉(zhuǎn)之前

使用 router.beforeEach 注冊一個全局前置守衛(wèi)饲趋。每次跳轉(zhuǎn)路由之前拐揭，都會攔截，next方法表示下一步篙贸。通常在這里會做一些權(quán)限驗證操作投队。
to：返回去哪里的路由信息
from：返回從哪來的路由信息
next方法：用于跳轉(zhuǎn)

// 定義路由前置守衛(wèi)
// 每次跳轉(zhuǎn)路由之前，都會攔截爵川，next方法表示下一步
router.beforeEach((to,from,next)=>{
  // 獲取瀏覽器的緩存中敷鸦，保存的當(dāng)前登錄用戶的權(quán)限
  let role = sessionStorage.getItem('role')
  // 驗證用戶訪問權(quán)限
  if(to.meta.roles && to.meta.roles.includes(role)){
    // next()方法，表示繼續(xù)向下執(zhí)行
    next()
  }
})

（2）后置守衛(wèi)--路由跳轉(zhuǎn)完成

使用 router.afterEach 注冊一個后置守衛(wèi)寝贡。通常在這里會做一些頁面的修改操作

router.afterEach((to,from)=>{
  // 配置當(dāng)前頁的標(biāo)題
  document.title = to.meta.title
})

4扒披、nprogress加載進(jìn)度條

nprogress是頁面跳轉(zhuǎn)時出現(xiàn)在瀏覽器頂部的進(jìn)度條。

（1）安裝

npm install nprogress

（2）導(dǎo)入

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

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

// 導(dǎo)航守衛(wèi)
// 1.路由前置守衛(wèi)--路由跳轉(zhuǎn)之前
router.beforeEach((to, from, next) => {
  // 開啟loading
  NProgress.start();
  // 通常：在這里會做一些權(quán)限驗證操作
  next();
});

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

5圃泡、二級路由

需要先定義一級路由組件碟案，確定好在哪個組件中配置二級路由，就去那個組件的配置規(guī)則中添加children關(guān)鍵字颇蜡，按照一級路由的配置方法配置規(guī)則价说。

  {
    path: '/one',
    name: 'One',
    component: ()=>import('@v/One.vue'),
    meta:{
      title:'One',
      roles:['admin']
    },
    //定義one的二級路由信息
    children:[
      {
        path:'nj',
        name:'nj',
        // 采用路由懶加載的方式，導(dǎo)入組件
        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、路由懶加載

使用路由懶加載缤弦，是為了給客戶更好的體驗领迈，首頁組件加載速度更快一些，提高首屏性能碍沐。
懶加載簡單來說就是延遲加載或按需加載狸捅，即在需要的時候的時候進(jìn)行加載。

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

7累提、路由分組懶加載

有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中尘喝。只需要使用命名 chunk，一個特殊的注釋語法來提供 chunk name刻恭。

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

scoped屬性宜咒，用于設(shè)置局部樣式程帕，當(dāng)前組件中的樣式只對當(dāng)前組件生效额嘿。
注意：App組件中的樣式是全局樣式愧哟，通常不加scoped。

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

9橡淑、sass

Sass 是一個 CSS 預(yù)處理器构拳。使用sass可以定義嵌套定義樣式，大大節(jié)省css代碼梁棠；使用sass可以使用定義變量置森，可以統(tǒng)一定義風(fēng)格。

（1）安裝

npm install sass sass-loader@8 -D

（2）使用

&符號表示當(dāng)前元素符糊。常見的兩種用法：偽類選擇器和偽元素凫海。

<div class="one">
    <h2>One</h2>
    <div class="province">
      江蘇省
      <div class="city">
        南京省
        <div class="district">
          雨花臺區(qū)
          <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 預(yù)處理器男娄。
注意：在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：用于緩存路由組件建瘫，默認(rèn)情況下會緩存打開的所有組件。如果需要指定緩存哪些組件尸折，通過include屬性指定啰脚，該屬性可以傳一個數(shù)組，數(shù)組中定義組件的名稱实夹。
作用：通過路由緩存橄浓，組件之間的切換就能保存上個組件的狀態(tài)，而不是切換之后又得重新操作亮航。

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

2贮配、路由組件特有的兩個生命周期

當(dāng)路由組件采用緩存后，created和mounted這兩個生命周期函數(shù)塞赂，只會在第一次執(zhí)行；并且destroyed這個生命周期函數(shù)不會執(zhí)行昼蛀。
這時候宴猾，通常都會配合activated（路由組件激活狀態(tài)生命周期函數(shù)）和deactivated（路由組件失活狀態(tài)生命周期函數(shù)）這兩個生命周期鉤子。
注意：只有當(dāng)組件在 <keep-alive> 內(nèi)被切換叼旋，才會有activated 和 deactivated 這兩個鉤子函數(shù)仇哆。

    // 路由組件激活狀態(tài)生命周期函數(shù)
    activated() {
        console.log('路由組件激活');
        // 開啟定時器
        this.timer = setInterval(()=>{
            this.count++
        },1000)
    },
    // 路由組件失活狀態(tài)生命周期函數(shù)
    deactivated() {
        console.log('路由組件失活');
        clearInterval(this.timer)
    }