個人技術總結

2022-08-19 19:12:11 字數 1671 閱讀 8699

我要介紹的是vue傳參的三種方式。這個技術算是比較基礎的,不會很難,但是基本每個專案都要用到,所以寫下這篇部落格。主要的運用場景:點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。

父元件(template部分):

}

父元件(js部分)

methods: `,

})}},

需要配置的路由如下

子元件如何獲得id

this.$route.params.id
父元件(js部分):通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。

methods: 

})}},

需要配置的路由如下

子元件如何獲得id

this.$route.params.id
父元件(js部分):使用path來匹配路由,然後通過query來傳遞引數。這種情況下 query傳遞的引數會顯示在url後面?id=?

methods: 

})}},

需要配置的路由如下

子元件如何獲取id

this.$route.query.id
vue路由跳**

settimeout(function () ,800)
上面是乙個簡例,語法沒問題但是報錯:

myfollow.vue?c93c:119 uncaught typeerror: cannot read property 'push' of undefined
這時候說明this指向不一樣了,要列印一下this 看看。

發現settimeout函式裡的this指向的不是vue物件而是window,改為箭頭函式即可解決

settimeout 的function會改變this指向並指向全域性window,如果不改變this指向 ,這裡要使用箭頭函式

settimeout(()=>,100)

雖然這篇部落格總結的知識較為簡單,但路由配置是vue專案構建中的重點和難點,只要理解原理,就不會覺得複雜了。如果希望從列表跳轉至詳情頁,就需要用到這樣的方法,這些基礎的東西是開發基於vue框架的專案必須掌握的。

vue官方文件

vue路由傳參的三種基本方式

個人技術總結

1 技術概述 vue router 是 vue.js 官方的路由管理器。它和 vue.js 的核心深度整合,讓構建單頁面應用變得易如反掌。包含的功能有 巢狀的路由 檢視表 模組化的 基於元件的路由配置 路由引數 查詢 萬用字元 基於 vue.js 過渡系統的檢視過渡效果 細粒度的導航控制 帶有自動啟...

個人技術總結

vue的學習 實現和使用 部分例子 2.v for列表渲染 學習任何一門新技術,都需要掌握正確的學習方法和步驟,我認為最適合我個人的方法就是,第一步閱讀文件,試圖搞清楚這項技術是在幹什麼。第二步是語法,不同技術之間的程式語言不同,語法也不同,語法錯誤是最低階的錯誤,熟悉語法才能避免低階錯誤。第三步則...

個人技術總結 vex table

技術概述 vxe table是乙個vue的 外掛程式,我們專案需要實現填寫 的功能,於是我就找到了這個外掛程式。難點在於,我覺得這個外掛程式的手冊寫得不是很好,而且比較冷門,網上缺少關於它的教程和討論,很多地方要自己研究。技術詳述 vxe table由三個部分組成,樣式,資料,方法。以此次作業的專案...