1. 程式人生 > >Vue學習之前端路由

Vue學習之前端路由

前端路由

  • 什麼是前端路由
    路由是根據不同的url地址展示不同的內容或頁面
    前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做,之前是通過服務端根據url的不同返回不同的頁面實現的

  • 什麼時候使用前端路由
    在單頁面應用,大部分頁面結構不變,只改變部分內容的使用

  • 優點:
    使用者體驗好,不需要每次都從伺服器全部獲取,快速展現給使用者

  • 缺點:
    不利於SEO
    使用瀏覽器的前進,後退鍵的時候會重新發送請求,沒有合理地利用快取 。單頁面無法記住之前滾動的位置,無法再前進,後退的時候記住滾動的位置

    vue路由常用模式

  • vue-router用來構建SPA

  • <router-link></router-link>

    或者this.$router.push({path:})

  • <router-virew></router-view>

  • 動態路由

模式 匹配路徑 $route.params
/user/:username /user/evan {username:‘evan’}
/user/:usrname/post/:post_id /user/evan/post/123 {username:‘evan’,post_id:123}
  • 巢狀路由
    路由巢狀路由

  • 程式設計式路由
    通過js來實現頁面跳轉

$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)
  • 命名路由和命名檢視
    給路由定義不同名字,根據名字進行匹配
    給不同的router-view定義名字,通過名字進行對應元件的渲染