家具网站案例,平面设计师磨刀石,做黑网站赚钱,合肥市城乡和建设网站一、前言
1、嵌套路由的含义
嵌套路由的核心思想是#xff1a;在某个路由的组件内部#xff0c;可以定义子路由#xff0c;这些子路由会渲染在父路由组件的特定位置#xff08;通常是 router-view 标签所在的位置#xff09;。通过嵌套路由#xff0c;你可以实…一、前言
1、嵌套路由的含义
嵌套路由的核心思想是在某个路由的组件内部可以定义子路由这些子路由会渲染在父路由组件的特定位置通常是 router-view 标签所在的位置。通过嵌套路由你可以实现多层级的页面布局。
2、使用场景
嵌套路由通常用于以下场景
多层布局比如一个页面有顶部导航栏、侧边栏和内容区域内容区域可以根据路由动态变化。模块化开发将页面拆分为多个子模块每个子模块对应一个子路由。动态路由根据用户权限或其他条件动态加载子路由。
3、实现方式
在 Vue Router 中通过 children 属性来定义嵌套路由。children 是一个数组每个元素都是一个子路由配置对象。
4、实现参考
可参考官网
嵌套路由 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/nested-routes.html
5、示例展示
// 路由配置
const routes [{path: /parent, // 父路由路径component: ParentComponent, // 父路由组件children: [{path: child1, // 子路由路径相对于父路由component: Child1Component // 子路由组件},{path: child2,component: Child2Component}]}
];// 创建路由实例
const router new VueRouter({routes
});
在父组件 ParentComponent 中需要使用 router-view 来渲染子路由组件
!-- ParentComponent.vue --
templatedivh1父组件/h1router-view/router-view !-- 子路由组件会渲染在这里 --/div
/template
访问嵌套路由
访问嵌套路由时路径是父路由路径和子路由路径的组合。例如
/parent/child1 会渲染 Child1Component。/parent/child2 会渲染 Child2Component。
二、实现步骤
1、找到初始写入路由页面 2、新建一个专门带左侧导航条的Layout
①路径
src-layout-index.vue ②代码
index.vue
templatediv左侧导航条/divdiv右侧内容!-- 右侧内容,引入的页面 --router-view/router-view!-- 或者使用 --!-- RouterView / --/div
/template
③改写路由代码 import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: /,name: main,component: () import(../layout/index.vue),children: [{path: /home,name: home,component: HomeView,},{path: /about,name: about,component: () import(../views/AboutView.vue),},],}, {path: /:pathMatch(.*)*,name: NotFound,component: () import(../views/NotFoundView.vue),},],
})export default router父级路由
为刚才新建立的layout的index.vue页面 path: /, name: main, component: () import(../layout/index.vue), path父路由路径这里的值为/,可以结合多个页面对比一下
这是path: / 下面是path: /home name为此路由命名可以省略
component:表示父路由组件这里也就是引入父路由的页面
子路由 这里存入两个页面一个是之前的home页面一个是about页面
这里的home的component的值为HomeView,其实是因为顶部已经有引入了其实写法一样只是换成了变量的形式 3、实现效果
现在可以看出父路由下的页面其实就是layout/index.vue的页面效果 子路由的页面效果就是在右侧内容中加入了页面引入
