前言

開發(fā)的時(shí)候有時(shí)候會(huì)遇到一種情況青抛，比如 ：點(diǎn)擊這個(gè)鏈接跳轉(zhuǎn)到其他組件的情況碘箍，通常會(huì)跳轉(zhuǎn)到新的頁(yè)面辽慕，但是如果我們不想跳轉(zhuǎn)到新頁(yè)面京腥，只在當(dāng)前頁(yè)面切換著顯示，那么就要涉及到路由的嵌套了溅蛉，也可以說是子路由的使用公浪。

實(shí)現(xiàn)

如何實(shí)現(xiàn)上面的場(chǎng)景呢？
首先镜撩，我們?cè)趯?dǎo)航組件navbar.vue中寫了三個(gè)導(dǎo)航鏈接预柒，他們對(duì)應(yīng)地址分別為：/food，/rating袁梗，/seller宜鸯，點(diǎn)擊每個(gè)導(dǎo)航鏈接會(huì)跳轉(zhuǎn)到不同的組件，并且加上<router-view></router-view>這個(gè)標(biāo)簽：
navbar.vue：

<template>
  <div class="navbar">
    <ul id="main">
      <li>
        <router-link to="/food">商品</router-link>
      </li>
      <li>
        <router-link to="/rating">評(píng)價(jià)</router-link>
      </li>
      <li>
        <router-link to="/seller">商家</router-link>
      </li>
    </ul>

    <!-- 路由匹配到的組件將顯示在這里 -->
    <router-view></router-view>
  </div>
</template>

然后围段，我們?cè)趇ndex.vue引入navbar.vue：
index.vue：

<template>
  <div class="index">
    <div class="nav"></div>
    <div class="shop-header">
      <div class="imgbox"><img src="../../static/img/56.jpg" alt=""/></div>
      <h2>黃蜀郞雞公煲<span class="ico"></span></h2>
      <p class="info1"><span>*4.6</span><span>月售738</span><span>商家配送約44分鐘</span><span>距離345m</span></p>
      <p class="info2">
        店內(nèi)免費(fèi)涮煲顾翼，（蔬菜、小料奈泪、主食、糕點(diǎn)灸芳、涼菜涝桅、水果、免費(fèi)吃）聞香識(shí)辣烙样，入口知麻冯遂，一鍋兩吃，獨(dú)具特色Ｚ嘶瘛８蚣　！</p>
    </div>
     <!--在這里引入navbar組件-->
    <navbar></navbar>
    
  </div>
</template>

<script>
    import navbar from '@/components/navbar'

    export default {
        data() {
            return {
                msg: []
            }
        },
        components: {
            navbar
        }
    }
</script>

<style>

</style>

最后批狱，路由配置：

{
      path: '/',
      name: 'index',
      component: index,
      redirect:'/food',
      children:[
       {
         path: 'food',
         name: 'food',
         component: food
       },
       {
         path: 'seller',
         name: 'seller',
         component: seller
       },
       {
         path: 'rating',
         name: 'rating',
         component: rating
       }
     ]
}

擴(kuò)展

可以使用keep-alive緩存路由頁(yè)面：

<keep-alive>
  <router-view></router-view>
</keep-alive>

注意： 使用<keep-alive>的頁(yè)面必需有自己name才會(huì)生效裸准。

原文：https://blog.csdn.net/luoyu6/article/details/80098145