1. 路由

路由是一個比較廣義和抽象的概念，路由的本質就對應關系，

在開發中，路由分為前端路由和后端路由，

1.1 路由的基本概念與原理

1.1.1 后端路由

概念：根據不同的用戶URL請求，回傳不同的內容

本質：URL請求地址與服務器資源之間的對應關系

后端渲染（存在性能問題）

Ajax前端渲染（前端渲染提高性能，但是不支持瀏覽器的前進后退操作）

SPA（Single Page Application）單頁面應用程式：整個網站只有一個頁面，內容的變化通過Ajax區域更新實作、同時支持瀏覽器地址欄的前進和后退操作

SPA實作原理之一：基于URL地址的hash（hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求）

在實作SPA程序中，最核心的技術點就是前端路由

1.1.2 前端路由

概念：根據不同的用戶事件，顯示不同的頁面內容

本質：用戶事件與事件處理函式之間的對應關系

1.1.3 實作簡易前端路由

基于URL中的hash實作（點擊選單的時候改變URL的hash，根據hash的變化控制組件的切換）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 匯入 vue 檔案 -->
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 實體控制的 div 區域 -->
    <div id="app">
      <!-- 切換組件的超鏈接 -->
      <a href="https://www.cnblogs.com/liuhui0308/p/#/zhuye">主頁</a> 
      <a href="https://www.cnblogs.com/liuhui0308/p/#/keji">科技</a> 
      <a href="https://www.cnblogs.com/liuhui0308/p/#/caijing">財經</a>
      <a href="https://www.cnblogs.com/liuhui0308/p/#/yule">娛樂</a>

      <!-- 根據 :is 屬性指定的組件名稱，把對應的組件渲染到 component 標簽所在的位置 -->
      <!-- 可以把 component 標簽當做是【組件的占位符】 -->
      <component :is="comName"></component>
    </div>

    <script>
      // #region 定義需要被切換的 4 個組件
      // 主頁組件
      const zhuye = {
        template: '<h1>主頁資訊</h1>'
      }

      // 科技組件
      const keji = {
        template: '<h1>科技資訊</h1>'
      }

      // 財經組件
      const caijing = {
        template: '<h1>財經資訊</h1>'
      }

      // 娛樂組件
      const yule = {
        template: '<h1>娛樂資訊</h1>'
      }
      // #endregion

      // #region vue 實體物件
      const vm = new Vue({
        el: '#app',
        data: {
          comName: 'zhuye'
        },
        // 注冊私有組件
        components: {
          zhuye,
          keji,
          caijing,
          yule
        }
      })
      // #endregion

      // 監聽 window 的 onhashchange 事件，根據獲取到的最新的 hash 值，切換要顯示的組件的名稱
      window.onhashchange = function() {
        // 通過 location.hash 獲取到最新的 hash 值
        console.log(location.hash);
        switch(location.hash.slice(1)){
          case '/zhuye':
            vm.comName = 'zhuye'
          break
          case '/keji':
            vm.comName = 'keji'
          break
          case '/caijing':
            vm.comName = 'caijing'
          break
          case '/yule':
            vm.comName = 'yule'
          break
        }
      }
    </script>
  </body>
</html>

實作效果：

點擊上面的標簽，下面的資訊就會改變，

1.2 Vue Router

Vue Router（官網：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器，
它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程式的開發，

Vue Router 包含的功能有：

支持HTML5歷史模式或hash模式

支持嵌套路由

支持路由引數

支持編程式路由

支持命名路由

1.2.1 vue-router的基本使用

1. 引入相關的庫檔案

2. 添加路由鏈接

3. 添加路由填充位

4. 定義路由組件

5. 配置路由規則并創建路由實體

6. 把路由掛載到Vue根實體中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 匯入 vue 檔案，為全域 window 物件掛載 Vue 建構式 --> 
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue_2.5.22.js"></script>
    <!-- 匯入 vue-router 檔案，為全域 window 物件掛載 VueRouter 建構式 -->
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實體所控制的區域 -->
    <div id="app">
        <!-- router-link 是 vue 中提供的標簽，默認會被渲染為 a 標簽 -->
            <!-- to 屬性默認會被渲染為 href 屬性 -->
            <!-- to 屬性的值默認會被渲染為 # 開頭的 hash 地址 -->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由填充位（也叫做路由占位符） -->
            <!-- 將來通過路由規則匹配到的組件，將會被渲染到 router-view 所在的位置 --> 
      <router-view></router-view>
    </div>

    <script>
//      定義路由組件
      const User = {
        template: '<h1>User 組件</h1>'
      }

      const Register = {
        template: '<h1>Register 組件</h1>'
      }

      // 創建路由實體物件
      const router = new VueRouter({
        // routes 所有的路由規則
        routes: [
          // 每個路由規則都是一個配置物件，其中至少包含 path 和 component 兩個屬性：
                  // path 表示當前路由規則匹配的 hash 地址
                  // component 表示當前路由規則對應要展示的組件
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 創建 vm 實體物件
      const vm = new Vue({
        // 指定控制的區域
        el: '#app',
        data: {},
        // 為了能夠讓路由規則生效，必須把路由物件掛載到 vue 實體物件上
        // router: router
        router
      })
    </script>
  </body>
</html>

執行效果：

1.2.2 路由重定向

路由重定向指的是：用戶在訪問地址A的時候，強制用戶跳轉到地址C，從而展示特定的組件頁面；通過路由規則的redirect屬性，指定一個新的路由地址，可以很方便地設定路由的重定向，

這個非常簡單，就把上面的代碼修改一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 匯入 vue 檔案，為全域 window 物件掛載 Vue 建構式 --> 
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue_2.5.22.js"></script>
    <!-- 匯入 vue-router 檔案，為全域 window 物件掛載 VueRouter 建構式 -->
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實體所控制的區域 -->
    <div id="app">
        <!-- router-link 是 vue 中提供的標簽，默認會被渲染為 a 標簽 -->
            <!-- to 屬性默認會被渲染為 href 屬性 -->
            <!-- to 屬性的值默認會被渲染為 # 開頭的 hash 地址 -->
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由填充位（也叫做路由占位符） -->
            <!-- 將來通過路由規則匹配到的組件，將會被渲染到 router-view 所在的位置 --> 
      <router-view></router-view>
    </div>

    <script>
//      定義路由組件
      const User = {
        template: '<h1>User 組件</h1>'
      }

      const Register = {
        template: '<h1>Register 組件</h1>'
      }

      // 創建路由實體物件
      const router = new VueRouter({
        // routes 所有的路由規則
        routes: [
            //path 表示需要被重定向的原地址，redirect 表示將要被重定向到的新地址
                  { path: '/', redirect: '/user'},
          // 每個路由規則都是一個配置物件，其中至少包含 path 和 component 兩個屬性：
                  // path 表示當前路由規則匹配的 hash 地址
                  // component 表示當前路由規則對應要展示的組件
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 創建 vm 實體物件
      const vm = new Vue({
        // 指定控制的區域
        el: '#app',
        data: {},
        // 為了能夠讓路由規則生效，必須把路由物件掛載到 vue 實體物件上
        // router: router
        router
      })
    </script>
  </body>
</html>

執行效果：

一打開默認顯示user組件，

1.3 vue-router嵌套路由

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 匯入 vue 檔案 -->
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue_2.5.22.js"></script>
    <script src="https://www.cnblogs.com/liuhui0308/p/lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實體所控制的區域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 組件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 組件</h1>
          <hr/>

          <!-- 子路由鏈接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子組件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子組件</h3>'
      }

      // 創建路由實體物件
      const router = new VueRouter({
        // 所有的路由規則
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 陣串列示子路由規則
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 創建 vm 實體物件
      const vm = new Vue({
        // 指定控制的區域
        el: '#app',
        data: {},
        // 掛載路由實體物件
        // router: router
        router
      })
    </script>
  </body>
</html>

執行效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/937.html

標籤：JavaScript

上一篇：實操ES6之Promise

下一篇：從入門到入土JS知識（一）：關系運算子和相等運算子

Vue基礎(九)：Vue路由(一)

1. 路由

1.1 路由的基本概念與原理

1.1.1 后端路由

1.1.2 前端路由

1.1.3 實作簡易前端路由

1.2 Vue Router

1.2.1 vue-router的基本使用

1.2.2 路由重定向

1.3 vue-router嵌套路由