1. 程式人生 > >nuxt-相同目錄下的多個動態路由跳轉

nuxt-相同目錄下的多個動態路由跳轉

 

  在專案的新需求中,對url規則更改,這裡拿課程頁面舉例,

  檔案目錄:pages/course/_course.vue----頁面規則需要更改為---->瀏覽器顯示 : http://主站地址/course    或者     http://主站地址/course/list_型別id_排序情況_升序(或者降序)_頁碼

  因為課程頁面包含了分頁,以及相應的篩選功能(如下圖),

  

  課程封面點進去進入課程詳情,之前的檔案路徑為 pages/course/courseDetail/_id.vue,這裡用的動態路由獲取id,然後查詢課程詳情,使瀏覽器上的連結地址為: http://主站地址/course/courseDetail/課程id

 

  而需求是兩個同時在course下,新的檔案結構如下

| course

| -------_course.vue

| -------_id.vue

 

  因此從pages/index.vue中跳過來時,就會出現無論怎麼輸入後面動態路由引數,只會進一個頁面,具體進那個頁面是根據路由配置檔案中,具體出現的順序有關,

  

  

  因為就需要我們手動配置,在nuxt.config.js中,具體規則可以看官網文件 

  但是這樣並不能解決問題,因此就需要在我們的檔案命名上做文章,

  

 

  把我們的_id.vue,命名問id.vue,因為他就不是個動態路由了,但是我們可以在nuxt.config.js把它配置成一個動態路由,

 

  

   其實是不是動態路由最終是可以由你自己來決定的,並不是檔名前有沒有_來決定他是不是動態路由的。

  這裡_course.vue更改為list_course.vue是因為我的目錄需要它,而且,進我的主頁去必須是http://localhost:3000/course,http://localhost:3000/course/,http://localhost:3000/course/list結構的,沒有list只是course/xxxxx是不會去我的主頁的,去的是我的詳情頁的

  

 

  那個path對應的三個,是我希望我的http://localhost:3000/course,http://localhost:3000/course/,http://localhost:3000/course/list_xxxxx_xxx_xx_4最終都到一個頁面去。

          所以這個問題就這麼解決了, ╭(╯ε╰)╮╭(╯ε╰)╮ 

 總結一下變化,

  • 1,檔案結構

    | course                                   | course

    | --------_course.vue                                | -------list_course.vue

    | --------courseDetail            ----變成了這樣---->           | -------id.vue

       |----------------_id.vue

 

  • 2,nuxt.config.js的更改

    新增路由手動配置

  

{
    path: "/course" || "/course/" || "/course/list:course",
    component: resolve(__dirname, 'pages/course/list_course.vue'),
    name: "course-listcourse"
},
{
    path: "/course/:id",//把非動態路由配置為動態路由
    component: resolve(__dirname, 'pages/course/id.vue'),
    name: "course-id"
},

然後over