您的位置:首頁>正文

跟小編一起學:Vue vue

路由, 其實就是指向的意思, 當我點擊頁面上的home按鈕時, 頁面中就要顯示home的內容, 如果點擊頁面上的about 按鈕, 頁面中就要顯示about 的內容。 Home按鈕 => home 內容, about按鈕 => about 內容, 也可以說是一種映射. 所以在頁面上有兩個部分, 一個是點擊部分, 一個是點擊之後, 顯示內容的部分。

點擊之後, 怎麼做到正確的對應, 比如, 我點擊home 按鈕, 頁面中怎麼就正好能顯示home的內容。 這就要在js 檔中配置路由。

路由中有三個基本的概念 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中實現路由還是相對簡單的。 因為我們頁面中所有內容都是元件化的, 我們只要把路徑和元件對應起來就可以了,

然後在頁面中把元件渲染出來。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示