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