nuxt頁面跳轉 nuxt路由及傳參

2021-10-13 02:33:12 字數 730 閱讀 3202

最近的nuxt專案中經常會用到路由傳參,故在此有所總結了下nuxt中傳參的方式和vue專案中傳參的方式

nuxt

作為ssr的nuxt專案中路由是根據pages下的檔案結構自動生成的,無需手動配置路由。很多時候專案需求,有列表頁和詳情頁。

方式一: 如圖:

image

詳情頁命名為 _id.vue (不要問我為什麼要用這個名字 大概是nuxt預設)

params 傳值(id會顯示位址列,其他引數不會顯示在位址列)

// 跳轉到houses檔案下的_id.vue詳情頁

this.$router.push()

this.$router.push()

接收:async asyncdata ()

// 或者

created ()

query傳值(會顯示在位址列)

// 傳遞引數

this.$router.push(`,query: })

// 接收引數:

created ()

query.site_id = siteid

name: 'houses-id' 是指 houses檔案加下的 _id.vue頁面 name可以在 .nuxt資料夾下的 router頁面

頁面的/***/ 後面必須傳值 數字,字母皆可, 此處用new的原因是 當_idl 為空的時候 進入log/_id.vue頁面不會報錯, 在修改和新增資料的用同乙個頁面的時候這種做法非常有效。

nuxt 動態路由

因為公司最近在做seo的優化,用的是nuxt,沒有做ssr,所以只能做一些基礎的優化.變成了 雖然我也沒太懂為什麼這樣做就算是對seo的一點基礎優化了 有朋友知道,望解答 這是我的專案名和它的詳情頁 這時候就需要建立乙個新檔案,跟index.vue同級,名字呢就姑且取名為 id.vue 為什麼前面有...

分享 nuxt頁面

頁面元件實際上是 vue 元件,只不過 nuxt.js 為這些元件新增了一些特殊的配置項 對應 nuxt.js 提供的功能特性 以便你能快速開發通用應用。vue school出品的 nuxt.js 頁面元件 的免費課程 red hello h1 template export default fet...

nuxt路由傳多個引數

用nuxt做的專案,剛好遇到路由跳轉傳多個引數問題 詳情頁命名為 id.vue 跳轉到詳情頁去 或者this.router.push 一定得注意是mystrategy id,不是mystrategy 接收引數 async asyncdata 或者 computed 參考文章 經過今天的測試,通過以上...