前端路由的概念與原理

什么是前端路由

1. Hash 地址與組件之間的映射關(guān)系，前端路由可以將hash地址和組件關(guān)聯(lián)起來
2. Hash地址就可以先簡單的理解為一個url地址
3. 可以發(fā)現(xiàn)，不管是后臺路由還是前端路由，都是一種映射關(guān)系
   • 后臺路由是請求地址(方式)和處理函數(shù)之間的映射關(guān)系
   • 前端路由是hash地址和組件之間的映射關(guān)系

前端路由的工作方式

1. 用戶點(diǎn)擊了頁面上的路由鏈接
2. 導(dǎo)致了 URL 地址欄中的 Hash 值發(fā)生了變化
3. 前端路由監(jiān)聽了到 Hash 地址的變化
4. 前端路由把當(dāng)前 Hash 地址對應(yīng)的組件渲染都瀏覽器中

實(shí)現(xiàn)一個簡易版本的路由

基本步驟

1. 創(chuàng)建三個組件用于測試

   
   

2. 導(dǎo)入并注冊這三個組件

<script>
import about from "./about";
import home from "./home";
import movie from "./movie";
export default {
  components: {
    about,
    home,
    movie,
  },
};
</script>

3. 添加動態(tài)組件，用于控制當(dāng)前組件的顯示

<component :is="comName"></component>

  data() {
    return {
      comName: "",
    };
  },

4. 添加三個超鏈接，注意設(shè)置href為錨鏈接

<template>
  <div>
    <a href="#/home">home</a> &nbsp;&nbsp;
    <a href="#/movie">movie</a> &nbsp;&nbsp;
    <a href="#/about">about</a> &nbsp;&nbsp;
    <component :is="comName"></component>
  </div>
</template>

5. 為window添加onhashchange事件，監(jiān)聽hash值的變化

  // 鉤子函數(shù) 頁面一加載就監(jiān)聽
  mounted() {
    window.onhashchange = () => {
      if (location.hash == "#/home") {
        this.comName = "home";
      } else if (location.hash == "#/movie") {
        this.comName = "movie";
      } else if (location.hash == "#/about") {
        this.comName = "about";
      }
    };
  },

效果

vue中路由的基本使用流程

vue-router介紹

1. Vue Router 是 Vue.js 官方的路由管理器
2. 它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌,說白了，就是配合vue.js一起來實(shí)現(xiàn)單擊應(yīng)用開發(fā)的，它主要用來實(shí)現(xiàn)項(xiàng)目中的路由管理
3. 我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們
4. vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
   • vue-router 3.x 只能結(jié)合 vue2 進(jìn)行使用
   • vue-router 4.x 只能結(jié)合 vue3 進(jìn)行使用

路由模塊的創(chuàng)建

1. 在項(xiàng)目中下載安裝vue-router
   npm install vue-router
2. 創(chuàng)建路由模塊文件：router.js
3. 引入
4. 在模塊化工程中明確的安裝路由功能
5. 創(chuàng)建路由對象
6. 添加具體的路由配置：路由映射組件
7. 暴露

//  這個文件就是當(dāng)前項(xiàng)目中的路由管理文件

// 1. 基于工程化-- 模塊化
import Vue from 'vue'
import VueRouter from "router"
// 明確的安裝路由功能
Vue.use(VueRouter)
// 引入路由映射所需要的組件
import index from '../components/router-demo/index.vue'
import about from '../components/router-demo/about.vue'

// 2.創(chuàng)建路由模塊
const router = new VueRouter({
    // 3. 添加路由配置，通過routes可以添加配置，它是一個數(shù)組
    routes: [
        // 4. 添加一個一個的具體的路由配置，主要是實(shí)現(xiàn)，url地址（路由）的映射關(guān)系
        // 它是一個對象，常見的配置：
        // path：路由路徑，如果 、login
        // component:所映射的組件對象 ---不是字符串
        {
            path: '/index',
            component: index
        },
        {
            path: '/about',
            component: about
        }
    ]
})

// 5. 暴露
export default router

基本路由功能的實(shí)現(xiàn)

1. 在main.js中引入路由模塊

import router from '@/router/managerRouter'

2. 注入路由

new Vue({
  // 注入路由：讓應(yīng)用可以使用路由功能
  router,
  render: h => h(App),
}).$mount('#app')

3. 在根組件中添加router-view

<!-- 設(shè)置路由映射組件的展示區(qū)域 -->
<router-view></router-view>

4. 使用router-link添加超鏈接

<!-- 添加超鏈接 -->
<router-link to="/index">首頁</router-link>

延遲加載組件

延遲加載：需要時才加載組件，而不是一開始就全部加載好,將代碼塊的加截推遲到需要的時候加載，從而使應(yīng)用程序的初始包變得更小，達(dá)到節(jié)省性能的目的

// 異步加載 -- 延遲加載
component: () => import('../components/day6/router-demo/index.vue')

動態(tài)路由匹配

路由參數(shù)的設(shè)置和傳遞

動態(tài)路由指的是：把 Hash 地址中可變的部分定義為參數(shù)項(xiàng)，從而提高路由規(guī)則的復(fù)用性。

1. 動態(tài)路由參數(shù)的設(shè)置
   • 使用場景：某種模式匹配到的所有路由，全都映射到同個組件
   • “路由參數(shù)”使用冒號 : 標(biāo)記

        {
            // 設(shè)置參數(shù)
            path: '/index/:id',
            name: 'index',
            // component: index
            // 異步加載 -- 延遲加載
            component: () => import('../components/day6/router-demo/index.vue')
        },

2. 動態(tài)路由參數(shù)的匹配

<router-link to="/index/1"></router-link>

注意：
如果沒有傳遞參數(shù)，則路由無法匹配
不用在傳遞參數(shù)的時候添加:了

獲取路由參數(shù)

    // 通過$route獲取路由參數(shù)
    // id:就是路由參數(shù)設(shè)置時的id
    // console.log(this.$route);
    // console.log(this.$route.params.id);
    let id = this.$route.params.id

使用 props 接收路由參數(shù)

1. 為了簡化路由參數(shù)的獲取形式，vue-router 允許在路由規(guī)則中開啟 props 傳參

{
    // 設(shè)置參數(shù)
    path: '/index/:id',
    name: 'index',
    // component: index
    // 在組件中，以props的形式接收路由規(guī)則所匹配的參數(shù)
    props: true,
    // 異步加載 -- 延遲加載
    component: () => import('../components/day6/router-demo/index.vue')
},

2. 在路由所映射的組件中使用props接收路由參數(shù)

export default {
  // 接收路由匹配參數(shù)
  props: ["id"],
  }

監(jiān)聽路由參數(shù)的變化

1. 當(dāng)使用動態(tài)路由參數(shù)時，如果只是參數(shù)的變化，原來的組件實(shí)例會被復(fù)用。因?yàn)閮蓚€路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效
2. 意味著組件的生命周期鉤子不會再被調(diào)用(mounted不會再觸發(fā))
3. 我們可以watch (監(jiān)測變化) $route 對象，以監(jiān)聽路由參數(shù)的變化

  //   同一個路由參數(shù)變化時觸發(fā)
  watch: {
    $route(to, from) {
      // 對路由變化做出響應(yīng)
      ...
    },
  },