• 售前

  • 售后

热门帖子
入门百科

vue router-view的嵌套显示实现

[复制链接]
xinting_6ym 显示全部楼层 发表于 2021-8-14 13:51:25 |阅读模式 打印 上一主题 下一主题
目次


  • 一、路由设置
  • 二、vue页面嵌套
  • 三、嵌套接洽

一、路由设置
  1. const routes = [
  2.   {
  3.     path: '/',
  4.     name: '导航1',
  5.     component: Home,
  6.     children:[
  7.       {
  8.         path: '/customer',
  9.         name: 'Customer',
  10.         // route level code-splitting
  11.         // this generates a separate chunk (about.[hash].js) for this route
  12.         // which is lazy-loaded when the route is visited.
  13.         component: () => import(/* webpackChunkName: "about" */ '../views/Customer.vue')
  14.       },
  15.       {
  16.         path: '/pageOne',
  17.         name: '页面1',
  18.         component: PageOne,
  19.       },
  20.       {
  21.         path: '/pageTwo',
  22.         name: '页面2',
  23.         component: PageTwo,
  24.     },
  25.     ]
  26.   },
  27.   {
  28.     path: '/navigation',
  29.     name: '导航2',
  30.     component: Home,
  31.     children:[
  32.       {
  33.         path: '/pageThree',
  34.         name: '页面3',
  35.         component: PageThree,
  36.       },
  37.       {
  38.         path: '/pageFour',
  39.         name: '页面4',
  40.         component: PageFour
  41.       },
  42.     ]
  43.   },
复制代码
二、vue页面嵌套


App.vue先设置第一个router-view
  1. // An highlighted block
  2. <router-view></router-view>
复制代码
Home.vue设置第二个router-view
  1. // An highlighted block
  2. <template>
  3.   <div>
  4.   <el-container style="height: 500px; border: 1px solid #eee">
  5.     <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
  6.       <el-menu>
  7.         <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
  8.         <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template>
  9.           <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
  10.         </el-submenu>
  11.       </el-menu>
  12.     </el-aside>
  13.     <el-container>
  14.       <el-header style="text-align: right; font-size: 12px">
  15.         <el-dropdown>
  16.           <i class="el-icon-setting" style="margin-right: 15px"></i>
  17.           <el-dropdown-menu slot="dropdown">
  18.             <el-dropdown-item>查看</el-dropdown-item>
  19.             <el-dropdown-item>新增</el-dropdown-item>
  20.             <el-dropdown-item>删除</el-dropdown-item>
  21.           </el-dropdown-menu>
  22.         </el-dropdown>
  23.         <span>王小虎</span>
  24.       </el-header>
  25.       <el-main>
  26.         <router-view></router-view>
  27.       </el-main>
  28.     </el-container>
  29.   </el-container>
  30. </div>
  31. </template>
  32. <style>
  33. .el-header {
  34.   background-color: #B3C0D1;
  35.   color: #333;
  36.   line-height: 60px;
  37. }
  38. .el-aside {
  39.   color: #333;
  40. }
  41. </style>
  42. <script>
  43. export default {
  44. };
  45. </script>
复制代码
三、嵌套接洽


起首,在访问http://localhost:8181/时会进入第一层嵌套,此时进入第一个router-view:Home.vue。然后当访问pageone时,会连带Home.vue继承访问。

由于router-view的嵌套表现和路由路基的嵌套有关,可以看到,在路由里面,导航一的路径底下分别是页面一以及页面二的路由路径。以是当访问页面一pageone时,会先访问上级路径Home.vue页面。加入Home.vue页面没有放置router-view,那么下级页面将无法表现

到此这篇关于vue router-view的嵌套表现实现的文章就介绍到这了,更多相关vue router-view嵌套表现内容请搜索草根技术分享以前的文章或继承欣赏下面的相关文章希望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作