路由学习之嵌套路由

俄罗斯套娃大家一定都见过👇

 

今天我就需要在路由中学习类似的知识点——嵌套路由

同样，通过案例来感受嵌套路由的使用

目录

案例效果

 router文件中index.js里的代码：

App.vue中的代码：

Banner.vue中的代码：

Home.vue中的代码：

Message.vue中的代码：

News.vue中的代码：

总结

---

案例效果

加深理解一下也就是组件中的小组件

 因为里面是嵌套的路由，所以在router这个文件夹中就需要把二级路由写在一级路由中，如图理解（在router文件中的index.js）:

 router文件中index.js里的代码：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'

// 创建并暴露一个路由器 ———— 由路由器渲染的就是路由组件
export default new VueRouter({
    // 嵌套路由
    routes: [{
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [{
                    // 在children中的path就不能写/ 不然嵌套的路由就无法点击出效果
                    path: 'news',
                    component: 'News',
                },
                {
                    path: 'message',
                    component: 'Message',
                }
            ]
        }
    ]
})

✨注意：

children：[{path:'news',component:'News'},{path:'message',component:'Message'}] 中的path就不需要加“ / ”

App.vue中的代码：

<template>
	<div>
    <div class="row">
     <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
<!-- 之前我们为了进行页面的跳转我们使用a标签实现 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->

<!--Vue中借助router-link标签实现路由的切换  -->
<!-- 利用active-class="active"实现切换效果 -->
		  <router-link class="list-group-item" active-class="active" to="/about.html">About</router-link>
		  <router-link class="list-group-item" active-class="active" to="/home.html">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
<!-- 指定组件的呈现位置 指定展示位置 -->
              <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from './components/Banner.vue'
	export default {
		name:'App',
		components:{Banner}
	}
</script>

Banner.vue中的代码：

<template>
 <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
</template>

<script>
//  Banner是自己写的组件就是一般组件
export default {
    name:'Banner'
}
</script>

<style lang="">
    
</style>

Home.vue中的代码：

<template>
<div>
    <h2>Home组件内容</h2>
    <div>
    <ul class="nav nav-tabs">
        <li>
<!-- to="/home/news" 由于在router-link中news是home的二级路由，所以在写的时候我们需要写上父级 -->
        <router-link class="list-group-item" active-class="active" to="/home/news" href="./home-news.html">News</router-link>
        </li>
        <li>
        <router-link class="list-group-item" active-class="active" to="/home/message" href="./home-message.html">Message</router-link>
        </li>
    </ul>
   <router-view></router-view>
   
</div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style lang="">
    
</style>

Message.vue中的代码：

<template>
<div>
    <ul>
        <li>
        <a href="/message1">message001</a>&nbsp;&nbsp;
        </li>
        <li>
        <a href="/message2">message002</a>&nbsp;&nbsp;
        </li>
        <li>
        <a href="/message/3">message003</a>&nbsp;&nbsp;
        </li>
    </ul>
</div>
</template>

<script>
export default {
    name:'Message',
}
</script>

<style lang="">
    
</style>

News.vue中的代码：

<template>
    <ul>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </ul>
</template>

<script>
export default {
    name:'News'
}
</script>

<style lang="">
    
</style>

---

总结

以上内容就是对于在路由中的使用情况✨