路由学习之嵌套路由

实习期小潘

已于 2022-04-21 08:57:58 修改

阅读量658

点赞数 2

分类专栏：笔记文章标签： vue.js 前端学习

于 2022-04-15 08:44:45 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/124035224

版权

本文通过案例介绍Vue.js中的嵌套路由概念，详细阐述了如何在router的index.js中配置二级路由，并展示了App.vue、Banner.vue、Home.vue、Message.vue及News.vue等组件在嵌套路由中的应用，帮助读者深入理解组件间的嵌套关系和路由配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

// 创建并暴露一个路由器 ———— 由路由器渲染的就是路由组件
export default new VueRouter({
    // 嵌套路由
    routes: [{
            path: '/about',