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