日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
在Vue.js中使用嵌套路由

隨著 Vue.js 單頁應(yīng)用(SPA)變得相當復(fù)雜，你開始需要 Vue 路由以及嵌套路由。嵌套路由允許更復(fù)雜的用戶界面以及相互嵌套的組件。讓我們創(chuàng)建一個相對簡單的用例，來展示 Vue Router 中嵌套路由的實用性。

用 Vue CLI 進行設(shè)置

如果尚未安裝，請運行以下命令全局安裝 Vue CLI：

 
 
 
 
    
  
  
  
  
  1. $ npm install -g @vue/cli 
    2.

或者

 
 
 
 
    
  
  
  
  
  1. $ yarn global add @vue/cli 
    2.

現(xiàn)在你能從命令行運行 vue 命令了。讓我們創(chuàng)建一個名為 alligator-nest 的 Vue 應(yīng)用：

 
 
 
 
    
  
  
  
  
  1. $ vue create alligator-nest 
    2.

在提示符下選擇默認預(yù)設(shè)(按 Enter 鍵)。之后，運行以下命令：

 
 
 
 
    
  
  
  
  
  1. $ npm install vue-router 
    2.

然后，在你選擇的編輯器中打開 alligator-nest 目錄。

基本代碼

以下 CSS 將幫助我們?yōu)?UI 定位元素。將其作為樣式表文件添加到 public/ 文件夾中，并在 public/index.html 中引用它。為此，我們將使用 CSS grid：

grid.css：

 
 
 
 
    
  
  
  
  
  1. .row1 { 
    2. 
  
  
  
  
  2.   grid-row-start: 1; 
    3. 
  
  
  
  
  3.   grid-row-end: 2; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. .row12 { 
    7. 
  
  
  
  
  7.   grid-row-start: 1; 
    8. 
  
  
  
  
  8.   grid-row-end: 3; 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. .row123 { 
    12. 
  
  
  
  
  12.   grid-row-start: 1; 
    13. 
  
  
  
  
  13.   grid-row-end: 4; 
    14. 
  
  
  
  
  14. } 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. .row2 { 
    17. 
  
  
  
  
  17.   grid-row-start: 2; 
    18. 
  
  
  
  
  18.   grid-row-end: 3; 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. .row23 { 
    22. 
  
  
  
  
  22.   grid-row-start: 2; 
    23. 
  
  
  
  
  23.   grid-row-end: 4; 
    24. 
  
  
  
  
  24. } 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26. .row3 { 
    27. 
  
  
  
  
  27.   grid-row-start: 3; 
    28. 
  
  
  
  
  28.   grid-row-end: 4; 
    29. 
  
  
  
  
  29. } 
    30. 
  
  
  
  
  30.  
    31. 
  
  
  
  
  31. .col1 { 
    32. 
  
  
  
  
  32.   grid-column-start: 1; 
    33. 
  
  
  
  
  33.   grid-column-end: 2; 
    34. 
  
  
  
  
  34. } 
    35. 
  
  
  
  
  35.  
    36. 
  
  
  
  
  36. .col12 { 
    37. 
  
  
  
  
  37.   grid-column-start: 1; 
    38. 
  
  
  
  
  38.   grid-column-end: 3; 
    39. 
  
  
  
  
  39. } 
    40. 
  
  
  
  
  40.  
    41. 
  
  
  
  
  41. .col123 { 
    42. 
  
  
  
  
  42.   grid-column-start: 1; 
    43. 
  
  
  
  
  43.   grid-column-end: 4; 
    44. 
  
  
  
  
  44. } 
    45. 
  
  
  
  
  45.  
    46. 
  
  
  
  
  46. .col1234 { 
    47. 
  
  
  
  
  47.   grid-column-start: 1; 
    48. 
  
  
  
  
  48.   grid-column-end: 5; 
    49. 
  
  
  
  
  49. } 
    50. 
  
  
  
  
  50.  
    51. 
  
  
  
  
  51. .col2 { 
    52. 
  
  
  
  
  52.   grid-column-start: 2; 
    53. 
  
  
  
  
  53.   grid-column-end: 3; 
    54. 
  
  
  
  
  54. } 
    55. 
  
  
  
  
  55.  
    56. 
  
  
  
  
  56. .col23 { 
    57. 
  
  
  
  
  57.   grid-column-start: 2; 
    58. 
  
  
  
  
  58.   grid-column-end: 4; 
    59. 
  
  
  
  
  59. } 
    60. 
  
  
  
  
  60.  
    61. 
  
  
  
  
  61. .col234 { 
    62. 
  
  
  
  
  62.   grid-column-start: 2; 
    63. 
  
  
  
  
  63.   grid-column-end: 5; 
    64. 
  
  
  
  
  64. } 
    65. 
  
  
  
  
  65.  
    66. 
  
  
  
  
  66. .col3 { 
    67. 
  
  
  
  
  67.   grid-column-start: 3; 
    68. 
  
  
  
  
  68.   grid-column-end: 4; 
    69. 
  
  
  
  
  69. } 
    70. 
  
  
  
  
  70.  
    71. 
  
  
  
  
  71. .col34 { 
    72. 
  
  
  
  
  72.   grid-column-start: 3; 
    73. 
  
  
  
  
  73.   grid-column-end: 5; 
    74. 
  
  
  
  
  74. } 
    75. 
  
  
  
  
  75.  
    76. 
  
  
  
  
  76. .col4 { 
    77. 
  
  
  
  
  77.   grid-column-start: 4; 
    78. 
  
  
  
  
  78.   grid-column-end: 5; 
    79. 
  
  
  
  
  79. } 
    80.

接下來，讓我們對 vue-cli 添加的默認文件進行一些更改。

從 src/components 文件夾中刪除 HelloWorld.vue，并從 src/App.vue 中刪除所有與其相關(guān)的東西。對 App.vue 中的 HTML 標記和 CSS 樣式進行以下修改。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. html, body { 
    3. 
  
  
  
  
  3.   height: 100vh; 
    4. 
  
  
  
  
  4.   width: 100vw; 
    5. 
  
  
  
  
  5.   padding: 0; 
    6. 
  
  
  
  
  6.   margin: 0; 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. #app { 
    10. 
  
  
  
  
  10.   font-family: Avenir, Helvetica, Arial, sans-serif; 
    11. 
  
  
  
  
  11.   -webkit-font-smoothing: antialiased; 
    12. 
  
  
  
  
  12.   -moz-osx-font-smoothing: grayscale; 
    13. 
  
  
  
  
  13.   color: #2c3e50; 
    14. 
  
  
  
  
  14.   padding: 2%; 
    15. 
  
  
  
  
  15.   height: 100%; 
    16. 
  
  
  
  
  16.   display: grid; 
    17. 
  
  
  
  
  17.   grid-template-rows: 20% 80%; 
    18. 
  
  
  
  
  18.   grid-template-columns: 25% 25% 25% 25%; 
    19. 
  
  
  
  
  19. } 
    20.

 

如果你在項目的根目錄中運行 npm run serve，則可以將鼠標懸停在瀏覽器中的 localhost:8080 上，并查看框架布局。那些 display:grid 屬性很有用!現(xiàn)在我們可以開始創(chuàng)建路由了。

輸入 Vue 路由

在 /components 文件夾中創(chuàng)建一個名為 AboutPage.vue 的組件。它看起來像這樣：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7.  
    8.

現(xiàn)在我們的 main.js 文件需要 /about 路由。它看起來像這樣。

 
 
 
 
    
  
  
  
  
  1. import VueRouter from 'vue-router'; 
    2. 
  
  
  
  
  2. import Vue from 'vue'; 
    3. 
  
  
  
  
  3. import App from './App.vue'; 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. Vue.config.productionTip = false; 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. import VueRouter from 'vue-router'; 
    8. 
  
  
  
  
  8. Vue.use(VueRouter); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. import AboutPage from './components/AboutPage.vue'; 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. const routes = [ 
    13. 
  
  
  
  
  13.   { path: '/about', component: AboutPage }, 
    14. 
  
  
  
  
  14. ] 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16. const router = new VueRouter({ 
    17. 
  
  
  
  
  17.   routes 
    18. 
  
  
  
  
  18. }) 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. new Vue({ 
    21. 
  
  
  
  
  21.   render: h => h(App), 
    22. 
  
  
  
  
  22.   router 
    23. 
  
  
  
  
  23. }).$mount('#app'); 
    24.

最后，讓我們回到 App.vue，并將 “About” 的錨標記更改為屬性為 to="/about"的 標簽。然后，將第二個 div 更改為 標簽。確保保持網(wǎng)格定位類屬性不變。

現(xiàn)在，我們有了一個功能齊全的站點框架，并為 “About” 頁面處理了路由。

我們在此重點介紹路由功能，因此不會在樣式上話費太多時間。盡管如此，我們也要讓Travels 頁面看起來更精致一些。

首先，創(chuàng)建一個 TravelPage，方法與創(chuàng)建 AboutPage 相同。在 main.js 中引用它。

還需要創(chuàng)建以下兩個組件，這些組件最終將嵌套在 TravelPage.vue 中：

TravelAmericaPage.vue

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7.

TravelChinaPage.vue

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.  
    8.

配置嵌套路由

現(xiàn)在，讓我們同時更新 main.js 和 TravelPage.vue，以使用 children 來引用這些嵌套路由。必須將 main.js 更新為對 routes 常量具有以下定義：

 
 
 
 
    
  
  
  
  
  1. const routes = [ 
    2. 
  
  
  
  
  2.   { 
    3. 
  
  
  
  
  3.     path: '/travel', component: TravelPage, 
    4. 
  
  
  
  
  4.     children: [ 
    5. 
  
  
  
  
  5.       { path: '/travel/america', component: TravelAmericaPage }, 
    6. 
  
  
  
  
  6.       { path: '/travel/china', component: TravelChinaPage} 
    7. 
  
  
  
  
  7.     ] 
    8. 
  
  
  
  
  8.   }, 
    9. 
  
  
  
  
  9.   { 
    10. 
  
  
  
  
  10.     path: '/about', component: AboutPage 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12. ]; 
    13.

請注意，子級的嵌套可以無限繼續(xù)下去。

并且 TravelPage.vue 可以通過以下方式編寫：

TravelPage.vue：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. div { 
    7. 
  
  
  
  
  7.   text-align: center; 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. #travel { 
    11. 
  
  
  
  
  11.   display: grid; 
    12. 
  
  
  
  
  12.   grid-template-rows: 20% 40% 40%; 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. .flex-container { 
    16. 
  
  
  
  
  16.   display: flex; 
    17. 
  
  
  
  
  17.   justify-content: space-around; 
    18. 
  
  
  
  
  18. } 
    19. 
  
  
  
  
  19.  
    20.

檢出 localhost:8080，你將看到 Travels 頁面中包含 2 個子頁面!當你單擊任一鏈接時，我們的 URL 也會相應(yīng)更新。

總結(jié)

希望本教程對你了解如何使用嵌套路由有幫助!

關(guān)于該主題的其他注意事項——我們可以使用動態(tài)段定義路由，例如 path:'/location/:id'。然后在這些路由的視圖上，可以將該 id 引用為 this.$route.params。當你希望在網(wǎng)站和應(yīng)用上顯示更多特定類型的數(shù)據(jù)(用戶、圖片等)時，此功能非常有用。


當前標題：在Vue.js中使用嵌套路由
鏈接URL：http://www.dlmjj.cn/article/cdijjsp.html