《前端》vue學習(四)下--路由--2020年6月17日

什麼是路由

  • 後端路由:對於普通的網站,所有的超鏈接都是URL地址,所有的URL地址都對應服務器上對應的資源;
  • 前端路由:對於單頁面應用程序來說,主要通過URL中的hash(#號)來實現不同頁面之間的切換同時,hash有一個特點:HTTP請求中不會包含hash相關的內容;所以,單頁面程序中的頁面跳轉主要用hash實現。
  • 在單頁面應用程序中,這種通過hash改變來切換頁面的方式,稱作前端路由(區別於後端路由)。

路由的安裝

(兩種方式:https://router.vuejs.org/zh-cn/installation.html)

導入vue和 vue-router的包即可。

路由的基本使用

1. 導入 vue-router 組件類庫(先導入vue.js)

2. 使用 router-link 組件來導航(可選項,使用router-link實現點擊跳轉)
      <router-link to="/login">登錄</router-link>

      <router-link to="/register">註冊</router-link>

也可以用<a>

    <a href="#/login">登錄</a>

    <a href="#/register">註冊</a>

3. 使用 router-view 組件來顯示匹配到的組件(相當於在html中的一個佔位符,路由的內容就放在這裏)

      <router-view></router-view>

4. 創建使用`Vue.extend`創建組件

    var login = {
      template: '<h1>登錄組件</h1>'
    };

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章