從零開始Vue項目實戰(四)-路由


一、理解路由

傳統的頁面應用,是用一些超鏈接來實現頁面切換和跳轉的。而vue的單頁面應用是基於路由和組件的,路由用於設定訪問路徑,並將路徑和組件映射起來。

路由中有三個基本的概念 route, routes, router。

    1, route,它是一條路由,由這個英文單詞也可以看出來,它是單數, Home按鈕  => home內容, 這是一條route,  about按鈕 => about 內容, 這是另一條路由。

    2, routes 是一組路由,把上面的每一條路由組合起來,形成一個數組。[{home 按鈕 =>home內容 }, { about按鈕 => about 內容}]

    3, router 是一個機制,相當於一個管理者,它來管理路由。因為routes 只是定義了一組路由,它放在哪里是靜止的,當真正來了請求,怎么辦? 就是當用戶點擊home 按鈕的時候,怎么辦?這時router 就起作用了,它到routes 中去查找,去找到對應的 home 內容,所以頁面中就顯示了 home 內容。

    4,客戶端中的路由,實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候,about 中的內容全部隱藏,反之也是一樣。客戶端路由有兩種實現方式:基於hash 和基於html5 history api.

二、vue-router中的路由

在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是組件化的,我們只要把路徑和組件對應起來就可以了,然后在頁面中把組件渲染出來。

  1, 頁面實現(html模版中)

    在vue-router中, 我們看到它定義了兩個標簽<router-link> 和<router-view>來對應點擊和顯示部分。<router-link> 就是定義頁面中點擊的部分,<router-view> 定義顯示部分,就是點擊后,區配的內容顯示在什么地方。所以 <router-link> 還有一個非常重要的屬性 to,定義點擊之后,要到哪里去, 如:<router-link  to="/home">Home</router-link>

  2, js 中配置路由

    首先要定義route,  一條路由的實現。它是一個對象,由兩個部分組成: path和component.  path 指路徑,component 指的是組件。如:{path:’/home’, component: home}

    我們這里有兩條路由,組成一個routes: 

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

  最后創建router 對路由進行管理,它是由構造函數 new vueRouter() 創建,接受routes 參數。

const router = new VueRouter({
      routes // routes: routes 的簡寫
})

  配置完成后,把router 實例注入到 vue 根實例中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

  執行過程:當用戶點擊 router-link 標簽時,會去尋找它的 to 屬性, 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}  path 一一對應,從而找到了匹配的組件, 最后把組件渲染到 <router-view> 標簽所在的地方。所有的這些實現才是基於hash 實現的。

三、設置路由

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM