小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

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

 小世界的野孩子 2021-09-20

1. 路由

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

在開發(fā)中，路由分為前端路由和后端路由。

1.1 路由的基本概念與原理

1.1.1 后端路由

概念：根據(jù)不同的用戶URL請求，返回不同的內(nèi)容

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

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

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

SPA（Single Page Application）單頁面應用程序：整個網(wǎng)站只有一個頁面，內(nèi)容的變化通過Ajax局部更新實現(xiàn)、同時支持瀏覽器地址欄的前進和后退操作

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

在實現(xiàn)SPA過程中，最核心的技術點就是前端路由

1.1.2 前端路由

概念：根據(jù)不同的用戶事件，顯示不同的頁面內(nèi)容

本質(zhì)：用戶事件與事件處理函數(shù)之間的對應關系

1.1.3 實現(xiàn)簡易前端路由

基于URL中的hash實現(xiàn)（點擊菜單的時候改變URL的hash，根據(jù)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="./lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 實例控制的 div 區(qū)域 -->
    <div id="app">
      <!-- 切換組件的超鏈接 -->
      <a href="#/zhuye">主頁</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">財經(jīng)</a>
      <a href="#/yule">娛樂</a>

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

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

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

      // 財經(jīng)組件
      const caijing = {
        template: '<h1>財經(jīng)信息</h1>'
      }

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

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

      // 監(jiān)聽 window 的 onhashchange 事件，根據(jù)獲取到的最新的 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>

實現(xiàn)效果：

 

點擊上面的標簽，下面的信息就會改變。

1.2 Vue Router 

Vue Router（官網(wǎng)：https://router./zh/）是 Vue.js 官方的路由管理器。
它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程序的開發(fā)。

Vue Router 包含的功能有：

支持HTML5歷史模式或hash模式

支持嵌套路由

支持路由參數(shù)

支持編程式路由

支持命名路由

1.2.1 vue-router的基本使用

1. 引入相關的庫文件

2. 添加路由鏈接

3. 添加路由填充位

4. 定義路由組件

5. 配置路由規(guī)則并創(chuàng)建路由實例

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 構造函數(shù) --> 
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 導入 vue-router 文件，為全局 window 對象掛載 VueRouter 構造函數(shù) -->
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實例所控制的區(qū)域 -->
    <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>

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

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

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

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

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

執(zhí)行效果：

1.2.2 路由重定向

路由重定向指的是：用戶在訪問地址A的時候，強制用戶跳轉(zhuǎn)到地址C，從而展示特定的組件頁面； 通過路由規(guī)則的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 構造函數(shù) --> 
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 導入 vue-router 文件，為全局 window 對象掛載 VueRouter 構造函數(shù) -->
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實例所控制的區(qū)域 -->
    <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>

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

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

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

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

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

執(zhí)行效果：

 

一打開默認顯示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="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實例所控制的區(qū)域 -->
    <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>'
      }

      // 創(chuàng)建路由實例對象
      const router = new VueRouter({
        // 所有的路由規(guī)則
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 數(shù)組表示子路由規(guī)則
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 創(chuàng)建 vm 實例對象
      const vm = new Vue({
        // 指定控制的區(qū)域
        el: '#app',
        data: {},
        // 掛載路由實例對象
        // router: router
        router
      })
    </script>
  </body>
</html>

執(zhí)行效果：

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多