做减肥餐的网站,app资源网站开发,网站建设费用说明,域名后面wordpress作用
配嵌套子路由,就是可以通过同一个页面,让不同的位置发生变化,其他的位置不会发生变化,而做到一个局部刷新
例子 红线框住的部分,头部和导航栏是不会发生变化的,变化的只有中间的内容
子路由的操作步骤
将这个页面的头部和导航栏部分的样式和风格,移到主路由上(tem…作用
配嵌套子路由,就是可以通过同一个页面,让不同的位置发生变化,其他的位置不会发生变化,而做到一个局部刷新
例子 红线框住的部分,头部和导航栏是不会发生变化的,变化的只有中间的内容
子路由的操作步骤
将这个页面的头部和导航栏部分的样式和风格,移到主路由上(template和scripe),将内容部分移到子路由
主路由页面
script
import {defineComponent} from vue
import HeadMenu from /views/inc/HeadMenu.vue;
import SideMenu from /views/inc/SideMenu.vue;export default defineComponent({name: Home,components: {SideMenu, HeadMenu}
})
/scripttemplateel-container!-- 左侧菜单栏 --el-aside classel-aside stylewidth: 200pxSideMenu/SideMenu/el-aside!-- 右侧主体内容 --el-container!-- 头部导航栏 --el-header classheaderHeadMenu/HeadMenu/el-header!-- 主要内容区域 --el-main classmainrouter-view/router-view/el-main/el-container/el-container
/template
script
import SideMenu from ./inc/SideMenu.vue;
import HeadMenu from ./inc/HeadMenu.vue;export default {name: Home,components: {SideMenu,HeadMenu}};
/scriptstyle
.el-aside {background-color: #D3DCE6;color: #333;text-align: left; /* 将文本向左对齐 */line-height: 60px; /* 菜单项垂直对齐 */height: 100%; /* 设置高度为父容器 el-container 的高度 */display: flex; /* 使用 Flex 布局 */flex-direction: column; /* 垂直布局 */
}.el-menu-vertical-demo {flex: 1; /* 菜单项占据 el-aside 的剩余空间 */overflow-y: auto; /* 如果内容过多显示滚动条 */width: 200px;
}.el-container {padding: 0;margin: 0;height: 100vh; /* 设置整体容器高度为视窗高度 */
}.el-header {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;
}.el-main {color: #333;text-align: center;line-height: 160px;
}/style
我这里是进行了一个页面的抽取
子路由页面
template
divmain/div
/template
script
import SideMenu from ./inc/SideMenu.vue;
import HeadMenu from ./inc/HeadMenu.vue;export default {name: index,components: {}};
/script
style scoped/style配置路由 {path: /,name: Home,component: () import( ../views/Home.vue),children: [{path: /index,name: index,component: () import( ../views/index.vue)}],},
相当于它还是同一个页面,只是里面进行了一个嵌套
这个时候页面还没有反应,因为没有引用
引用 !-- 主要内容区域 --el-main classmainrouter-view/router-view/el-main
使用router-view/router-view来进行引用
成功
结果 这样就可以做到在不创建新页面的情况下,使用同一个页面完成局部刷新
