nuxt-相同目錄下的多個(gè)動(dòng)態(tài)路由跳轉(zhuǎn)

同人博客搬遷~~~~(播客主頁(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末牧牢,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子姿锭,更是在濱河造成了極大的恐慌塔鳍,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呻此,死亡現(xiàn)場(chǎng)離奇詭異轮纫,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)焚鲜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門掌唾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人忿磅,你說我怎么就攤上這事糯彬。” “怎么了葱她?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵撩扒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我吨些,道長(zhǎng)搓谆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任豪墅,我火速辦了婚禮泉手,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘偶器。我一直安慰自己螃诅,他們只是感情好啡氢,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著术裸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪亭枷。 梳的紋絲不亂的頭發(fā)上袭艺,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音叨粘,去河邊找鬼猾编。 笑死,一個(gè)胖子當(dāng)著我的面吹牛升敲,可吹牛的內(nèi)容都是我干的答倡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼驴党,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼瘪撇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起港庄,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤倔既,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后鹏氧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渤涌,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年把还,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了实蓬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡吊履,死狀恐怖安皱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情率翅,我是刑警寧澤练俐,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站冕臭,受9級(jí)特大地震影響腺晾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜辜贵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一悯蝉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧托慨,春花似錦鼻由、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蔼紧。三九已至,卻和暖如春狠轻,著一層夾襖步出監(jiān)牢的瞬間奸例,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工向楼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留查吊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓湖蜕,卻偏偏與公主長(zhǎng)得像逻卖,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子昭抒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354