《VueRouter爬坑第三篇》-嵌套路由

---

VueRouter系列的文章示例編寫時，項目是使用vue-cli腳手架搭建。

項目搭建的步驟和項目目錄專門寫了一篇文章：點擊這裏進行傳送

後續VueRouter系列的文章的示例編寫均基於該項目環境。

---

 VueRouter系列文章連接

　　《VueRouter爬坑第一篇》-簡單實踐

　　《VueRouter爬坑第二篇》-動態路由

　　《VueRouter爬坑第三篇》-嵌套路由

---

 閱讀目錄

一.前言-從需求出發

二.需求實現

　　1.菜單

　　2.產品列表

　　3.產品詳情

三.主角-嵌套路由

四.總結

---

一.前言-從需求出發

　　假設咱們有這樣一個需求和界面佈局：

　　

 

　　左邊是菜單區域，點擊菜單欄的【產品】，右邊內容區上面顯示產品列表，點擊某個產品名稱下面顯示產品詳情。

　　emmmm，忽然想一想這個需求造的有點雞肋，可是也是爲了從一個問題出發好去理解接下來的內容。

 

　　仔細想想，大體的思路以下：

　　1.菜單是公共內容，咱們放入App.vue組件中實現邏輯和頁面佈局，點擊菜單欄的菜單名稱使用<router-link>和<router-view>去顯示產品列表。

　　2.產品列表須要新建組件：Content.vue。該組件中編寫產品列表的代碼，點擊產品名稱展現產品詳情使用<router-link>和<router-view>去顯示產品詳情。

　　3.產品詳情須要新建組件：ProductDetail.vue組件。該組件中，展現相應的產品詳情。

 

　　前面兩篇VueRouter文章中的主要知識點就是url映射組件和動態路由，接下來咱們結合前兩篇VueRouter文章的知識點，按照這個思路去實現需求。

　　感受已經摩拳擦掌火燒眉毛想去實現這個小需求了 let's go go go

　　　　　　

二.需求實現

1.菜單實現-App組件

E:\MyStudy\test\VueDemo\src\App.vue

<template>
  <div id="app">
    <!-- 菜單  -->
    <ul>
      <li v-for='(item,index) in menuList' v-bind:key='index' >
          <router-link v-bind:to='item.url'>{{item.name}}</router-link>
      </li>
    </ul>
    <!-- 內容區 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      menuList: [
        {
          url: 'index',
          name: '首頁'
        },{
          url: 'products',
          name: '產品'
        }
      ]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
ul {
    display: inline-block;
    width: 100px;
    border: 1px solid #ddd;
    padding: 100px 0px 100px 20px;
    position: fixed;
    top: -10px;
    bottom: 0px;
}
a{
  text-decoration: none;
}
</style>　　

　　App組件主要就是三點：

　　　　1.循環數據menuList展現菜單列表，而且每一個菜單須要使用<router-link>添加連接

　　　　2.使用<router-view>告訴vue-router把菜單連接匹配到的組件渲染到那個位置

　　　　3.菜單的佈局：使用fiex定位將菜單固定在瀏覽器左邊，同時設置top和bottom使菜單垂直方向上鋪滿瀏覽器

 

　　咱們看下App組件的效果：

　　

2.產品列表-Content組件

　　咱們須要新建一個組件來編寫產品列表的代碼：Content.vue

E:\MyStudy\test\VueDemo\src\components\Content.vue

<template>
    <div class='productContent'> 
        <div class="productList">
            <!-- 產品列表  -->
            <h1>產品列表</h1>
            <p v-for="(item,index) in productsList" v-bind:key='index'> 
                <router-link v-bind:to="item.url">{{item.name}}</router-link>
            </p> 
        </div>
        <!-- 產品詳情 -->
        <router-view />
    </div>
</template>
<script>
export default {
    name: 'Content',
    data() {
        return {
            productsList: [
                {
                    url: '/productDetail/1',
                    name: '產品1'
                },{
                    url: '/productDetail/2',
                    name: '產品2'
                }
            ]
        }
    }

}
</script>
<style scoped>
    .productContent{
        margin-left: 150px;
    }
    .productList{
        border:1px solid #ddd;
        margin: 10px;
    }
</style>

 

　　Content組件主要就是三點：

　　　　1.循環數據productsList展現產品列表，而且每一個產品名稱使用<router-link>添加連接

　　　　2.使用<router-view>告訴vue-router把產品名稱匹配到的組件渲染到哪一個位置

　　　　3.內容頁的佈局：須要設置左邊距 margin-left:150px，這樣就不會和菜單產生覆蓋。

 

　　接着咱們配置菜單中的【產品】連接渲染到產品列表的路由。

E:\MyStudy\test\VueDemo\src\router\router.js

import Vue from "vue"
import Router from "vue-router" Vue.use(Router) // 引入路由須要映射的組件 import Content from '@/components/Content.vue' const routes = [ { path: '/products', // 具體的路由 component: Content // 路由映射的組件  }, ] const router = new Router({ routes: routes }) export default router

 

　　如今在看下效果：

　　

 

　　能夠看到點擊菜單欄的【產品】已經能夠成功的渲染出Content.vue組件並展現產品列表了。

3.產品詳情-ProductDetail組件

　　新建組件：ProductDetail.vue

E:\MyStudy\test\VueDemo\src\components\Content.vue

<template>
    <div class='productDetail'> 
        <p>
            名稱：產品{{$route.params.id}}
        </p>
        <p>
            詳細信息：這是產品{{$route.params.id}}的詳細信息......
        </p>
    </div>
</template>
<script>
export default {
    name: 'ProductDetail',
}

</script>
<style scoped>
.productDetail{
    border:1px solid #ddd;
    margin-left: 150px;
}
</style>

 

　　產品詳情組件比較簡單，主要有下面幾點：

　　1.點擊不一樣的產品名稱須要渲染到產品詳情組件，所以產品名稱到產品詳情的路由會採用動態路由去實現。

　　2.使用了$route.parmas獲取了動態路由中的參數並在模板中展現。

 

　　接着就須要配置從產品名稱到產品詳情的動態路由了

E:\MyStudy\test\VueDemo\src\router\router.js

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

// 引入路由須要映射的組件
import Content from '@/components/Content.vue'
import ProductDetail from '@/components/ProductDetail.vue'
const routes = [
    {
        path: '/products',  // 具體的路由
        component: Content, // 路由映射的組件
    },
    {
        path: '/productDetail/:id', //這裏使用了動態路由
        component: ProductDetail    // 路由映射的組件
    }
]

const router = new Router({
    routes: routes
})

export default router

 

　  代碼完成，大概能想到的結果就是：當點擊產品名稱時，產品列表下方就會出現產品詳情。

      那麼我懷着雞凍的心情看下告終果：

　　

　　emmmmmm，跟咱們想要的效果咋不同：產品詳情覆蓋了產品列表。可是在Content.vue頁面，咱們明明使用<router-view>已經告知了產品詳情組件應該渲染的位置。

　　　　

 

　　到這裏呢，咱們這節的主角嵌套路由就要登場了。

 　　　　

三.主角-嵌套路由

　　在回到咱們的需求和咱們前面實現的代碼，App組件、Content組件和ProductDetail組件這三者的關係是一層一層往下嵌套而且結合vue-router、router-view顯示的：

  　　

 　　由於組件之間是這樣嵌套的關係，因此對應路由也須要按照這個結構去嵌套。

　　 那路由嵌套呢，就是在單條路由配置中添加children選項，children選項就是和routes同樣的路由配置數組，同時還支持屢次的嵌套。

　　話很少少，咱們將產品詳情這條路由嵌套到產品列表路由配置下。

　　備註：App組件是根組件，全部的組件都是嵌套在該組件下的，默認路由也都是嵌套在根組件下。

E:\MyStudy\test\VueDemo\src\router\router.js

 

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

// 引入路由須要映射的組件
import Content from '@/components/Content.vue'
import ProductDetail from '@/components/ProductDetail.vue'
const routes = [
    {
        path: '/products',  // 具體的路由
        component: Content, // 路由映射的組件
        // 產品詳情須要使用路由嵌套才能實現
        children:[
            {
                path: '/productDetail/:id', //這裏使用了動態路由
                component: ProductDetail    // 路由映射的組件
            }
        ]
    }   
]

const router = new Router({
    routes: routes
})

export default router

 

 

　　這裏還須要把ProductDetail.vue組件中的界面佈局修改一下：

.productDetail{
    border:1px solid #ddd;
    margin: 10px;
}

 

　　如今就沒啥問題了，咱們在看下效果：

 

　　如今這個效果就是咱們想要的效果了。是否是也很簡單呢 hahahahaha

　　　　　　　　

四.總結

　　

1.是否須要使用嵌套路由是要根據組件以前是否存在嵌套關係。

2.路由嵌套就是在單條路由配置中添加children選項，children選項就是和routes同樣的路由配置數組，同時還支持屢次的嵌套。