一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Vue基礎(chǔ)(九):Vue路由(一)

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

1. 路由

路由是一個比較廣義和抽象的概念,路由的本質(zhì)就對應(yīng)關(guān)系。

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

1.1 路由的基本概念與原理

1.1.1 后端路由

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

本質(zhì):URL請求地址與服務(wù)器資源之間的對應(yīng)關(guān)系

后端渲染(存在性能問題)

Ajax前端渲染(前端渲染提高性能,但是不支持瀏覽器的前進后退操作)

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

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

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

1.1.2 前端路由

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

本質(zhì):用戶事件與事件處理函數(shù)之間的對應(yīng)關(guān)系

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>
    <!-- 導(dǎo)入 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 屬性指定的組件名稱,把對應(yīng)的組件渲染到 component 標(biāo)簽所在的位置 -->
      <!-- 可以把 component 標(biāo)簽當(dāng)做是【組件的占位符】 -->
      <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)效果:

 

點擊上面的標(biāo)簽,下面的信息就會改變。

1.2 Vue Router 

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

Vue Router 包含的功能有:

支持HTML5歷史模式或hash模式

支持嵌套路由

支持路由參數(shù)

支持編程式路由

支持命名路由

1.2.1 vue-router的基本使用

1. 引入相關(guān)的庫文件

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>
    <!-- 導(dǎo)入 vue 文件,為全局 window 對象掛載 Vue 構(gòu)造函數(shù) --> 
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 導(dǎo)入 vue-router 文件,為全局 window 對象掛載 VueRouter 構(gòu)造函數(shù) -->
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實例所控制的區(qū)域 -->
    <div id="app">
        <!-- router-link 是 vue 中提供的標(biāo)簽,默認會被渲染為 a 標(biāo)簽 -->
            <!-- 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 表示當(dāng)前路由規(guī)則匹配的 hash 地址
                  // component 表示當(dāng)前路由規(guī)則對應(yīng)要展示的組件
          { 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屬性,指定一個新的路由地址,可以很方便地設(shè)置路由的重定向。

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

 

<!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>
    <!-- 導(dǎo)入 vue 文件,為全局 window 對象掛載 Vue 構(gòu)造函數(shù) --> 
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 導(dǎo)入 vue-router 文件,為全局 window 對象掛載 VueRouter 構(gòu)造函數(shù) -->
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 實例所控制的區(qū)域 -->
    <div id="app">
        <!-- router-link 是 vue 中提供的標(biāo)簽,默認會被渲染為 a 標(biāo)簽 -->
            <!-- 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 表示當(dāng)前路由規(guī)則匹配的 hash 地址
                  // component 表示當(dāng)前路由規(guī)則對應(yīng)要展示的組件
          { 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>
    <!-- 導(dǎo)入 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)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    玩弄人妻少妇一区二区桃花| 99久久免费看国产精品| 国语久精品在视频在线观看| 日本高清一区免费不卡| 中文字幕精品一区二区年下载| 亚洲一区二区精品免费视频| 加勒比日本欧美在线观看| 国产一区欧美一区日韩一区| 日本欧美一区二区三区就| 国产丝袜美女诱惑一区二区| 日韩特级黄色大片在线观看| 日韩国产中文在线视频| 日本人妻精品中文字幕不卡乱码| 视频在线观看色一区二区| 精品日韩中文字幕视频在线| 日本久久精品在线观看| 亚洲av首页免费在线观看| 日本不卡在线视频中文国产| 大屁股肥臀熟女一区二区视频| 日本精品理论在线观看| 亚洲精品国产第一区二区多人| 久一视频这里只有精品| 九九热精彩视频在线免费 | 亚洲少妇人妻一区二区| 日韩午夜老司机免费视频| 欧美日韩国产欧美日韩| 欧美国产日韩变态另类在线看 | 一区二区三区日韩中文| 色偷偷亚洲女人天堂观看| 欧美日韩国产精品黄片| 日韩在线精品视频观看| 成人免费视频免费观看| 国产偷拍盗摄一区二区| 亚洲午夜精品视频观看| 欧美日韩精品一区二区三区不卡 | 蜜臀人妻一区二区三区| 国产精品伦一区二区三区四季| 98精品永久免费视频| 亚洲国产中文字幕在线观看| 国产又粗又长又大高潮视频| 亚洲一区二区三区四区性色av |