nuxt 動態路由

2022-05-08 18:27:07 字數 878 閱讀 6456

因為公司最近在做seo的優化,用的是nuxt,沒有做ssr,所以只能做一些基礎的優化.

----------變成了----------------->

雖然我也沒太懂為什麼這樣做就算是對seo的一點基礎優化了(有朋友知道,望解答)

這是我的專案名和它的詳情頁

這時候就需要建立乙個新檔案,跟index.vue同級

名字呢就姑且取名為_id.vue

為什麼前面有個_呢,相當於這就是動態路由的標誌。

之前頁面之間的跳轉是用的router-link,query傳的值

在子頁面接收值是用的 $route.query.projectid(ps:query後面的變數和接收使用的是同乙個)

利用動態路由之後,接受值就是$route.params.idps:params後面的引數就是_後面的檔名,例如_haha.vue,那麼就是$route.params.haha

這個時候頁面的跳轉就可以直接用a標籤跳轉了

因為courseid是後台傳過來的欄位名,所以這裡也就直接寫上去了,item是因為我這有個迴圈,item拿到迴圈裡面的每一項。

這樣子這個頁面跳轉的鏈結就處理好了。(排版很醜啊,隨意記錄學習歷程)

nuxt頁面跳轉 nuxt路由及傳參

最近的nuxt專案中經常會用到路由傳參,故在此有所總結了下nuxt中傳參的方式和vue專案中傳參的方式 nuxt 作為ssr的nuxt專案中路由是根據pages下的檔案結構自動生成的,無需手動配置路由。很多時候專案需求,有列表頁和詳情頁。方式一 如圖 image 詳情頁命名為 id.vue 不要問我...

nuxt路由傳多個引數

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

vue路由傳參方式 nuxt

vue路由傳參常用的三種方式 1 通過params來傳遞引數 本人常用 傳遞引數 接收引數 2 通過path跳轉 getdescribe id 對應路由配置如下 接收引數 route.params.id3 通過query傳參 引數會顯示在url後面?id 注意 頁面之間的跳轉使用query 不然的話...