1. <wbr id="m8vu6"></wbr>

      <del id="m8vu6"><center id="m8vu6"><source id="m8vu6"></source></center></del>
        <p id="m8vu6"><sub id="m8vu6"></sub></p>

        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > JavaScript >
        • JavaScript教程之JavaScript教程之[Vue 牛刀小試]:第十三章 - Vue Ro

         一、前言#

          在上一章的學習中,我們簡單介紹了前端路由的概念,以及如何在 Vue 中通過使用 Vue Router 來實現我們的前端路由。但是在實際使用中,我們經常會遇到路由傳參、或者一個頁面是由多個組件組成的情況。本章,我們就來介紹下在這兩種情況下 Vue Router 的使用方法以及一些可能涉及到的概念。

          學習系列目錄地址:https://www.cnblogs.com/danvic712/p/9549100.html

          倉儲地址:https://github.com/Lanesra712/VueTrial/tree/master/chapter02-bronze/router/pass

         二、干貨合集#

          1、命名路由#

          在某些時候,我們期望生成的路由 URL 地址可能會很長,在使用中可能會顯得有些不便。這時候通過一個名稱來標識一個路會更方便一些,因此在 Vue Router 中,我們可以在創建 Router 實例的時候,通過在 routes 配置中給某個路由設置名稱,從而方便的調用路由。

        復制代碼
        const router = new VueRouter({
          routes: [
            {
              path: '/form',
              name: 'form',
              component: '<div>form 組件</div>'
            }
          ]
        })
        復制代碼

          當我們使用命名路由之后,當需要使用 router-link 標簽進行跳轉時,就可以采取給 router-link 的 to 屬性傳一個對象的方式,跳轉到指定的路由地址上。

        <router-link :to="{ name: 'form'}">User</router-link>

          2、命名視圖#

          當我們打開一個頁面時,整個頁面可能是由多個 Vue 組件所構成的,例如,我們的后臺管理首頁可能是由 sidebar (側導航) 、header(頂部導航)和 main (主內容)這三個 Vue 組件構成的。此時,當我們通過 Vue Router 構建路由信息時,如果一個 URL 只能對應一個 Vue 組件,整個頁面肯定是無法正確顯示的。

          在上一章的學習中,我們在構建路由信息的時候有使用到兩個特殊的標簽:router-view 和 router-link。通過 router-view 標簽,我們就可以指定組件渲染顯示到什么位置。因此,當我們需要在一個頁面上顯示多個組件的時候,就需要在頁面中添加多個的 router-view 標簽。

          那么,是不是可以通過一個路由對應多個組件,然后按需渲染在不同的 router-view 標簽上呢?按照上一章中介紹的關于 Vue Router 的使用方法,我們可以很容易的實現下面的代碼。

        復制代碼
        <div id="app">
            <router-view></router-view>
            <div class="container">
                <router-view></router-view>
                <router-view></router-view>
            </div>
        </div>
        
        <template id="sidebar">
            <div class="sidebar">
                sidebar
            </div>
        </template>
        
        <script>
            // 1、定義路由跳轉的組件模板
            const header = {
                template: '<div class="header"> header </div>'
            }
        
            const sidebar = {
                template: '#sidebar',
            }
        
            const main = {
                template: '<div class="main"> main </div>'
            }
        
            // 2、定義路由信息
            const routes = [{
                path: '/',
                component: header
            }, {
                path: '/',
                component: sidebar
            }, {
                path: '/',
                component: main
            }]
        
            const router = new VueRouter({
                routes
            })
        
            // 3、掛載到當前 Vue 實例上
            const vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                router: router
            });
        </script>
        復制代碼

          可以看到,并沒有實現我們想要實現的效果,當我們將一個路由信息對應到多個組件時,不管有多少個的 router-view 標簽,程序都會將第一個組件渲染到所有的 router-view 標簽上。

          因此,在這種情況下,我們需要實現的是一個路由信息可以按照我們的需要去渲染到頁面中指定的 router-view 標簽上,而在 Vue Router 中,我們則可以通過命名視圖的方式實現我們的需求。

          命名視圖,從名稱上看可能無法闡述的很清楚,與命名路由的實現方式相似,命名視圖通過在 router-view 標簽上設定 name 屬性,之后,在構建路由與組件的對應關系時,以一種 name:component 的形式構造出一個組件對象,從而指明是在哪個 router-view 標簽上加載什么組件。

          注意,這里在指定路由對應的組件時,使用的是 components(包含 s)屬性進行配置組件。實現命名視圖的代碼如下所示。

        復制代碼
        <div id="app">
            <router-view></router-view>
            <div class="container">
                <router-view name="sidebar"></router-view>
                <router-view name="main"></router-view>
            </div>
        </div>
        
        <script>
            // 2、定義路由信息
            const routes = [{
                path: '/',
                components: {
                    default: header,
                    sidebar: sidebar,
                    main: main
                }
            }]
        </script>
        復制代碼

          在 router-view 中,默認的 name 屬性值為 default,所以這里的 header 組件對應的 router-view 標簽就可以不設定 name 屬性值。完整的示例代碼如下。

        復制代碼
        <div id="app">
            <router-view></router-view>
            <div class="container">
                <router-view name="sidebar"></router-view>
                <router-view name="main"></router-view>
            </div>
        </div>
        
        <template id="sidebar">
            <div class="sidebar">
                sidebar
            </div>
        </template>
        
        <script>
            // 1、定義路由跳轉的組件模板
            const header = {
                template: '<div class="header"> header </div>'
            }
        
            const sidebar = {
                template: '#sidebar'
            }
        
            const main = {
                template: '<div class="main"> main </div>'
            }
        
            // 2、定義路由信息
            const routes = [{
                path: '/',
                components: {
                    default: header,
                    sidebar: sidebar,
                    main: main
                }
            }]
        
            const router = new VueRouter({
                routes
            })
        
            // 3、掛載到當前 Vue 實例上
            const vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                router: router
            });
        </script>
        復制代碼

          3、路由傳參#

          在很多的情況下,例如表單提交,組件跳轉之類的操作,我們需要使用到上一個表單、組件的一些數據,這時我們就需要將需要的參數通過參數傳參的方式在路由間進行傳遞。

          例如,在下面的示例中,我們想要實現通過點擊 main 組件中的子組件 form 組件上的按鈕,將表單的內容傳遞到 info 子組件中進行顯示,功能示意圖如下所示。

          3.1、query 傳參

          query 查詢參數傳參,就是將我們需要的參數以 key=value 的方式放在 url 地址中。例如這里的需求,我們需要在 info 組件中顯示上一個頁面的數據,所以我們的 info 頁面顯示的 URL 地址應該為 /info?email=xxx&password=xxx,這里的 email 和 password 參數值則是 form 組件上用戶輸入的值。之后,我們通過獲取這兩個參數值即可實現我們的需求。

          當我們將實例化的 VueRouter 對象掛載到 Vue 實例后,Vue Router 在我們的 Vue 實例上創建了兩個屬性對象 this.$router(router 實例) 和 this.$route(當前頁面的路由信息)。從下圖可以看到,我們可以通過 vm.$route 獲取到當前頁面的路由信息,而這里的 query 對象則是我們需要的。

          可以看到,這時我們就可以直接通過 $route.query.參數名 的方式獲取到對應的參數值。同時可以發現,fullPath 屬性可以獲取到當前頁面的地址和 query 查詢參數,而 path 屬性則只是獲取到當前的路由信息。

          同時,因為在使用 Vue Router 時已經將 VueRouter 實例掛載到 Vue 實例上,因此就可以直接通過調用 $router.push 方法來導航到另一個頁面,所以這里 form 組件中的按鈕事件,我們就可以使用這種方式完成路由地址的跳轉,完整的代碼如下。

        復制代碼
        <div id="app">
            <div class="row">
                <div class="col">
                    <router-view></router-view>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2 sidebar">
                    <router-view name="sidebar"></router-view>
                </div>
                <div class="col-sm-10 main">
                    <router-view name="main"></router-view>
                </div>
            </div>
        </div>
        
        <template id="sidebar"
              
        
        
        
          
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看