邊緣邊緣人的技術筆記
0%

筆記 Vue-router - 1. 一些筆記

發表於 分類於 Disqus：

關鍵字： 路由轉場, 參數傳遞, inheritAttrs, keep-alive

路由轉場

<router-view> 是一個動態元件，所以可以使用 transition 元件轉場。

  1. 共同轉場效果
1
2
3
4

<transition name="fade">
  <router-view></router-view>
</transition>

  1. 根據元件決定效果：
    各個元件自行在 root element 使用 transition 元件。

  2. 根據路由決定效果

    1. v-bind name
    2. watch $route change。根據路由參數決定 name。

跟原生轉場的不同在，支援不同因素決定轉場效果。因為 router 本身就是根據路由參數決定元件，同理，我們可以根據路由參數決定轉場(如上述 3)。

同理，可以製作一個根據不同情況決定參數，再決定轉場名稱/元件的結構。就會長得很像樓上一串。

參數傳遞

router 有一個透過動態路由決定參數的機制。

  1. 方法A ：
    /:id —> 動態路由、?q=123 —> 查詢。
    這兩個參數可以被路由下的元件取得，
    分別透過 this.$route.params 或 this.$route.query。

  1. 方法B ： router 提供路由參數透過 props 傳入的做法。
    因為 A 會導致元件依賴 this.$route.某某參數，所以該元件只能在有提供那個參數的路由上使用。這跟元件的獨立性有衝突。

    • 注意：只在 route 變動時，對應的 props 才會改變

    • 將 props 設為 true，則 params 會作為 props 傳入

      1
      2
      3
      4
      5
      6
      {
        path : '/user/:id',
        component : profile,
        props : true 
      },
      // <h1> {{ id }} </h1>

    • 根據 named-view 進行設定

      1
      2
      3
      4
      5
      {
          path : '/user/:id',
          components : {default : profile, sidebar: sidebar},
          props : { default : true, sidebar: false }
      }, // 只傳給 default 作為 props

    • 參數種類

      1. 動態參數1 : 將 props 設為 true 。只傳入 params。

      2. 動態參數2 : function。可以傳入包括在內的 query 任何參數。

        1
        2
        3
        4
        {
          //....
          props : (route) => {query : route.query.q}
        }

      3. 靜態參數 : 只會傳入你傳入的物件。

        1
        2
        3
        4
        5
        {
          //......
          props : {id : "userid"}
          // use like this : <h1> {{ id }} </h1>
        }

狀況題：

inheritAttrs 與 $attrs

對 <router-view> 傳入 props user_data。<router-view>會動態切換三個元件，但是會接收 user_data 作為 props 的只有其中一個。這導致另外兩個元件在 html 上出現額外的 attribute user_data，底下一串 [Object object] 字串。
———> 這不是 router 獨有的問題。是 Vue 動態元件可能產生的問題。
———> 解法：
A. 對不接收該參數的元件設置 inheritAttrs 為 false。

1
2
3
4
5
Vue.component({
  data(){ return {} },
  inheritAttrs : false,
  //....
})

B. 承A，傳入的 attribute 可以使用 $attrs 繼承，再傳到下層元件

1
2
3
4
5
6
7
8
<label>
  {{ label }}
  <input
    v-bind="$attrs"
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  >
</label>

保持元件渲染狀態 <keep-alive>

Vue 原生元件，可在元件切換後快取元件狀態，使切換回來時，不會重新渲染。
可以結合 exclude 及 include 決定那些元件要快取。
keep-alive下的元件必須要有 name 屬性。(指元件實體的定義)

1
2
3
<keep-alive exclude="config"> <!--name 是 config 的元件-->
  <router-view v-if="ajaxProcessEnd"></router-view>
</keep-alive>

在 ajax 結束前，不要出現 router-view

—————–>>>>使用 v-if。

1
<router-view v-if="ajaxProcessEnd"></router-view>