Vue框架之路由

◆ 路由的概念：

路由的本質就是一種對應關係，比如說我們在url地址中輸入我們要訪問的url地址之後，瀏覽器要去請求這個url地址對應的資源。那麼url地址和真實的資源之間就有一種對應的關係，就是路由。

◆ 路由分類：

路由分爲前端路由和後端路由：

前端路由是依靠hash值(錨鏈接)的變化進行實現
後端路由是由服務器端進行實現，並完成資源的分發

◆ 前端路由的基本概念：

前端路由主要做的事情就是監聽事件並分發執行事件處理函數，即根據不同的事件來顯示不同的頁面內容，即事件與事件處理函數之間的對應關係。

前端路由是基於hash值的變化進行實現的（比如點擊頁面中的菜單或者按鈕改變URL的hash值，根據hash值的變化來控制組件的切換）。核心實現依靠一個事件，即監聽hash值變化的事件

window.onhashchange = function(){
    //location.hash可以獲取到最新的hash值
    location.hash
}

◆ 前端路由實現tab欄切換：

核心思路：

當我們點擊超鏈接的時候，會改變url地址中的hash值，當hash值被改變時，就會觸發onhashchange事件。在觸發onhashchange事件的時候，我們根據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 區域 -->
        <div id="app">
        <!-- 切換組件的超鏈接 -->
        <a href="#/zhuye">主頁</a> 
        <a href="#/keji">科技</a> 
        <a href="#/caijing">財經</a>
        <a href="#/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>

◆ Vue Router：

Vue Router是一個Vue.js官方提供的路由管理器。
Vue Router和Vue.js非常契合，可以一起方便的實現SPA(single page web application,單頁應用程序)應用程序的開發。
Vue Router依賴於Vue，所以需要先引入Vue，再引入Vue Router。

◆ Vue Router的特性：

支持H5歷史模式或者hash模式
支持嵌套路由
支持路由參數
支持編程式路由
支持命名路由
支持路由導航守衛
支持路由過渡動畫特效
支持路由懶加載
支持路由滾動行爲

◆ Vue Router的使用步驟：

導入js文件
添加路由鏈接
添加路由佔位符(最後路由展示的組件就會在佔位符的位置顯示)
定義路由組件
配置路由規則並創建路由實例
將路由掛載到Vue實例中

示例：

<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 實例所控制的區域 -->
  <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: '<h1>Register 組件</h1>'
    }

    // 創建路由實例對象
    const router = new VueRouter({
      // 所有的路由規則
      routes: [
        { path: '/user', component: User },
        { path: '/register', component: Register }
      ]
    })

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

◆ 路由重定向：

可以通過路由重定向爲頁面設置默認展示的組件。

var myRouter = new VueRouter({
    //routes是路由規則數組
    routes: [
        //path設置爲/表示頁面最初始的地址 / ,redirect表示要被重定向的新地址，設置爲一個路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

◆ 路由嵌套：

當我們進行路由的時候顯示的組件中還有新的子級路由鏈接以及內容。

<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 實例所控制的區域 -->
  <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>

◆ 動態路由匹配：

通過/:參數名的形式傳遞參數

const User = {
  template: '<h1>User 組件 -- 用戶id爲: {{$route.params.id}}</h1>'
}

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

// 創建路由實例對象
const router = new VueRouter({
  // 所有的路由規則
  routes: [
    { path: '/', redirect: '/user'},
    { path: '/user/:id', component: User },
    { path: '/register', component: Register }
  ]
})

如果使用$route.params.id來獲取路徑傳參的數據不夠靈活。我們還可以採用如下方式：

我們可以通過props來接收參數

const User = {
  props: ['id'],
  template: '<h1>User 組件 -- 用戶id爲: {{id}}</h1>'
}

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

// 創建路由實例對象
const router = new VueRouter({
  // 所有的路由規則
  routes: [
    { path: '/', redirect: '/user'},
    { path: '/user/:id', component: User, props: true },
    { path: '/register', component: Register }
  ]
})

還有一種情況，我們可以將props設置爲對象，那麼就直接將對象的數據傳遞給
組件進行使用

const User = {
  props: ['id', 'uname', 'age'],
  template: '<h1>User 組件 -- 用戶id爲: {{id}} -- 姓名爲:{{uname}} -- 年齡爲：{{age}}</h1>'
}

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

// 創建路由實例對象
const router = new VueRouter({
  // 所有的路由規則
  routes: [
    { path: '/', redirect: '/user'},
    { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
    { path: '/register', component: Register }
  ]
})

如果想要獲取傳遞的參數值還想要獲取傳遞的對象數據，那麼props應該設置爲函數形式

const User = {
  props: ['id', 'uname', 'age'],
  template: '<h1>User 組件 -- 用戶id爲: {{id}} -- 姓名爲:{{uname}} -- 年齡爲：{{age}}</h1>'
}

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

// 創建路由實例對象
const router = new VueRouter({
  // 所有的路由規則
  routes: [
    { path: '/', redirect: '/user' },
    {
      path: '/user/:id',
      component: User,
      props: route => ({ uname: 'zs', age: 20, id: route.params.id })
    },
    { path: '/register', component: Register }
  ]
})

◆ 命名路由：

命名路由就是給路由取別名，添加了別名之後，可以使用別名進行跳轉

  <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 實例所控制的區域 -->
    <div id="app">
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      
      <!-- 路由佔位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 組件 -- 用戶id爲: {{id}} -- 姓名爲:{{uname}} -- 年齡爲：{{age}}</h1>'
      }

      // 創建路由實例對象
      const router = new VueRouter({
        // 所有的路由規則
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          }
        ]
      })

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

宅羽

發佈了293 篇原創文章 · 獲贊 6 · 訪問量 5萬+

私信關注

Vue框架之路由

◆ 路由的概念：

◆ 路由分類：

◆ 前端路由的基本概念：

◆ 前端路由實現tab欄切換：

◆ Vue Router：

◆ Vue Router的特性：

◆ Vue Router的使用步驟：

◆ 路由重定向：

◆ 路由嵌套：

◆ 動態路由匹配：

◆ 命名路由：

Ajax資料之同源政策

Ajax資料之基礎概念和運行原理

Vue框架之Vue組件之間傳值

Nodejs資料之Gulp模塊

JavaScript資料之FormData對象

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結