程式狂想筆記

一個攻城師奮鬥史

0%

vueJS router 新手小試

最近看了alex直播全家桶,也看了官網router範例
看官網範例可以vuejs/vue-router: 🚦 The official router for Vue.js. git clone回去

1
2
npm install 
npm run dev

有看有懂,但實戰就忘了一堆XD
還是留一下比較

先小記我寫router問題/心得
有搭配json-server
json-server db.json --static .
http://localhost:3000/index.htm
可以進入到網頁

程式檔案
  1. 使用router 帶入param沒法帶vue本生data到component裡面
    目前雖然用js閉包做到,但這樣不好看….,目前找不到方法,然到真的用vuex最佳解?

  2. router 可以算是全域變數,一直看範例以為要this.$router才能用
    (目前猜測 new Vue出來變數可能用$xxx可以抓到)

    1
    2
    3
    4
    5
    new Vue({
    el,
    router,
    data
    })
  3. 第一次嘗試ES6完整縮寫,看起來清爽多了
    this.directorys.splice(this.directorys.findIndex( el => el.id == id), 1)

  4. Router傳參數好像不太方便,但說不定有更好的方法(我還沒有嘗試用vuex)

    1
    2
    3
    4
    5
    // { path: '/edit/:id', component: Edit_c, props: ()=>{ return { data : data.directorys.find( el =>{return el.id == 1 })}  }}
    //帶router帶參數好像只能用props: true
    // { path: '/edit/:id', component: Edit_c, props: ()=>{ return { data : JSON.parse(JSON.stringify(data.directorys.find( el =>{return el.id == 1 })))} }}
    //router 帶 props 會連動 地雷,可用json parse stringify 來解決
    // 但好像不太能這樣用,一進/edit/xx 會出錯
  5. ajax,fetch,axios 差別,目前查到的資料fetch是基於promise,axios是XHR加Promise,所以很多人都推axios
    但我為什麼先用fetch呢?其實是懶得cdnjs找套件XD

    1
    2
    3
    4
    5
    6
    7
    8
    fetch('/directorys',{
    method: 'GET'
    }).then((res)=>{
    if (!res.ok) throw new Error(res.statusText)
    return res.json();
    }).then((data)=>{
    this.directorys = data;
    });

    Using Fetch - Web APIs | MDN

  1. Array.prototype.find ,Array.prototype.findIndex很實用

  2. vuejs的table場景特效可以用<tbody>
    transition-group is not working on tables · Issue #3907 · vuejs/vue

  3. 到底讓子元件做ajax查詢資料,還是讓父類別做ajax查詢,說真的感覺component做ajax比較好做,但是感覺寫在父層對component自由度會比較大
    但相對
    目前覺得很死component(只查某一類東西)在component做會比較好
    不然data binding雙向綁定會搞死人,vue-router又不能使用v-once
    我現在才想到我是不是因為用v-model關係
    才導致雙向綁定,也許我該用v-bind:value才對 orz

  1. input[type=radio]在使用vue data binding,用JSON.parse(JSON.stringify(xxxx))轉出物件做bind好像會有問題,後來有想到用computed做,但還沒測試。

  2. router-view到底該不該寫event事件呢?我看很多範例都沒有這樣寫,不知道該寫event bus跟vuex哪個比較好,但是vuex還沒學,我想router搞熟在學會比較好

以上有些疑問可能要復仇名單(我有記得的話,再回來改)

總結

這次code寫的很糟糕,感覺有很多地方可以改進
也了解寫template沒有用vue cli真的很痛苦
就像寫筆記本沒亮度提示,真的很傷眼睛XD

router 串大量參數感覺真的很不方便,難道真的要靠vuex解決?
有空研究一下還有什麼方法,閉包解法真的不是很好看

感覺<component is="xxx">和vue-router比起來
可以做到頁籤分頁功能,我想唯一的是vue-router有做到回上一頁功能
說真的這個真的很方便

但網頁上寫commponent真的很痛苦
難道該跳cli了XD

最後突然想到component有一個keep-alive
就在想router有沒有這玩意
vue-router 之 keep-alive - 简书

最後又想到event問題,官方文件沒有提到
但我實作一下,好像可以用