同人博客搬遷~~~~(播客主頁(yè):https://www.cnblogs.com/epines/)
在項(xiàng)目的新需求中屿讽,對(duì)url規(guī)則更改冬殃,這里拿課程頁(yè)面舉例鼎姐,
文件目錄:pages/course/_course.vue----頁(yè)面規(guī)則需要更改為---->瀏覽器顯示 :?http://主站地址/course? ? 或者? ? ?http://主站地址/course/list_類型id_排序情況_升序(或者降序)_頁(yè)碼
因?yàn)檎n程頁(yè)面包含了分頁(yè),以及相應(yīng)的篩選功能(如下圖)草描,
課程封面點(diǎn)進(jìn)去進(jìn)入課程詳情,之前的文件路徑為 pages/course/courseDetail/_id.vue婴渡,這里用的動(dòng)態(tài)路由獲取id俺抽,然后查詢課程詳情,使瀏覽器上的鏈接地址為:?http://主站地址/course/courseDetail/課程id
而需求是兩個(gè)同時(shí)在course下沸伏,新的文件結(jié)構(gòu)如下
| course
| -------_course.vue
| -------_id.vue
因此從pages/index.vue中跳過來時(shí)糕珊,就會(huì)出現(xiàn)無論怎么輸入后面動(dòng)態(tài)路由參數(shù),只會(huì)進(jìn)一個(gè)頁(yè)面毅糟,具體進(jìn)那個(gè)頁(yè)面是根據(jù)路由配置文件中红选,具體出現(xiàn)的順序有關(guān),
因?yàn)榫托枰覀兪謩?dòng)配置姆另,在nuxt.config.js中喇肋,具體規(guī)則可以看官網(wǎng)文檔
但是這樣并不能解決問題,因此就需要在我們的文件命名上做文章迹辐,
把我們的_id.vue蝶防,命名問id.vue,因?yàn)樗筒皇莻€(gè)動(dòng)態(tài)路由了明吩,但是我們可以在nuxt.config.js把它配置成一個(gè)動(dòng)態(tài)路由间学,
?其實(shí)是不是動(dòng)態(tài)路由最終是可以由你自己來決定的,并不是文件名前有沒有_來決定他是不是動(dòng)態(tài)路由的。
這里_course.vue更改為list_course.vue是因?yàn)槲业哪夸浶枰秃蚁晗郏M(jìn)我的主頁(yè)去必須是http://localhost:3000/course,http://localhost:3000/course/嘿悬,http://localhost:3000/course/list結(jié)構(gòu)的实柠,沒有l(wèi)ist只是course/xxxxx是不會(huì)去我的主頁(yè)的,去的是我的詳情頁(yè)的
那個(gè)path對(duì)應(yīng)的三個(gè)善涨,是我希望我的http://localhost:3000/course窒盐,http://localhost:3000/course/,http://localhost:3000/course/list_xxxxx_xxx_xx_4最終都到一個(gè)頁(yè)面去躯概。
所以這個(gè)問題就這么解決了登钥,?╭(╯ε╰)╮╭(╯ε╰)╮?
?總結(jié)一下變化,
1娶靡,文件結(jié)構(gòu)
| course | course
| --------_course.vue ? ?| -------list_course.vue
| --------courseDetail ----變成了這樣----> ? | -------id.vue
|----------------_id.vue
2,nuxt.config.js的更改
添加路由手動(dòng)配置
{
? ? path: "/course" || "/course/" || "/course/list:course",
? ? component: resolve(__dirname, 'pages/course/list_course.vue'),
? ? name: "course-listcourse"},
{
? ? path: "/course/:id",//把非動(dòng)態(tài)路由配置為動(dòng)態(tài)路由
? ? component: resolve(__dirname, 'pages/course/id.vue'),
? ? name: "course-id"},
然后over