116.【SpringBoot和Vue结合-图书馆管理系统】（四）-阿里云开发者社区

116.【SpringBoot和Vue结合-图书馆管理系统】（四）

2023-09-24 44

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 116.【SpringBoot和Vue结合-图书馆管理系统】

4.问题探究-(多级路由问题)⭐⭐⭐

(1).问题展现

我们发现假如我们按照上面的代码编写程序的话，就会发现内嵌两个主题框架的情况。这种情况出现的原因是:

内层: 因为我们在配置路由的时候，我们配置的是儿子类。在Vue中儿子类是展现在父Vue组件的身体中的。又因为我们在配置路由的时候把这个父类设置成了App.vue这个组件，所以最里面的内嵌套我们可以理解了。
外层: 我们因为在App.vue组件中搭建了框架，又通过router-view这个路由展现的操作，所以实现了对内层的嵌套。

(2).解决问题

1.我们将App.vue的框架抽出来生成新的Index.vue这个组件如下:

views/index.vue

<template>
  <div>
        <!-- 页面框架 -->
    <el-container style="height: 500px; border: 1px solid #eee">
      <!-- 左菜单框架 -->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!-- 左菜单详细内容 -->
        <!-- <el-menu :default-openeds="['1', '3']" :default-active="'1-1'"> -->
        <!-- 可展开的菜单 -->
        <!-- <el-submenu index="1"> -->
        <!-- 对应展开菜单的文本标题 -->
        <!-- <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            > -->
        <!-- 菜单分组 -->
        <!-- <el-menu-item-group>
              <template slot="title">分组一</template> -->
        <!-- 菜单子结点 -->
        <!-- <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu> -->
<!-- 菜单详细信息 -->
        <el-menu default-active="0">
          <!-- 可展开的菜单 : 这里的index一定要加上,目的是为了分清父菜单-->
          <el-submenu  v-for="(item_father, index_father) in $router.options.routes" :key="index_father" :index="index_father+''">
            <!-- 这个菜单的标题和图标 -->
            <template slot="title"><i class="el-icon-message"></i>{{item_father.name}}</template>
            <!-- 菜单字节点  index在这里作用是高亮选择,index一定要保证唯一性 -->
            <el-menu-item  v-for="(item_son, index_son) in item_father.children" :key="index_son" :index="index_father+'-'+index_son">{{item_son.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
            <router-view></router-view>
        <el-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2.配置路由，将路由的父亲都设置成我们抽象出来的index.vue

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import App from '../App.vue'
import Index from '../views/Index.vue'
Vue.use(VueRouter)
const routes = [
  // 导航1
  {
    path: '/',
    name: '导航1',
    component: Index,
    children: [  // 二级路由
      {
        path: '/pageone',
        name: 'pageone',
        component: PageOne
      },
      {
        path: '/pagetwo',
        name: 'pagetwo',
        component: PageTwo
      },
    ]
  },
  // 导航2
  {
    path: '/navigation',
    name: '导航2',
    component: App,
    children: [
      {
        path: 'pagethree',
        name: 'pagethree',
        component: PageThree
      },
      {
        path: 'pagefour',
        name: 'pagefour',
        component: PageFour
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

3.App.vue进行展现生成的框架

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
  mounted(){
    console.log('vc',this);
  }
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

(3).问题总结 ⭐⭐⭐

假如我们设置的是多级路由，所以子路由跳转实际上都是在父路由的一个 < router-view> 区间进行变化。App.vue展现的是被子路由改变后的父路由。

5.左侧菜单页与右侧页面交互

(1).三个基本步骤

< el -menu>标签添加 router 属性
在父路由页面中添加 < router-view>标签，它是一个容器，动态渲染你选择的子路由router。
< el-menu-item>标签的index值就是要跳转的路由

(2).开始搭建

1.如何实现路由跳转

index.vue

index属性居然是用于跳转的???
加上router属性名

<template>
  <div>
        <!-- 页面框架 -->
    <el-container style="height: 500px; border: 1px solid #eee">
      <!-- 左菜单框架 -->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!-- 左菜单详细内容 -->
        <!-- <el-menu :default-openeds="['1', '3']" :default-active="'1-1'"> -->
        <!-- 可展开的菜单 -->
        <!-- <el-submenu index="1"> -->
        <!-- 对应展开菜单的文本标题 -->
        <!-- <template slot="title"
              ><i class="el-icon-message"></i>导航一</template
            > -->
        <!-- 菜单分组 -->
        <!-- <el-menu-item-group>
              <template slot="title">分组一</template> -->
        <!-- 菜单子结点 -->
        <!-- <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu> -->
<!-- 菜单详细信息 -->
        <el-menu :default-openeds="['0','1']" router>
          <!-- 可展开的菜单 : 这里的index一定要加上,目的是为了分清父菜单-->
          <el-submenu  v-for="(item_father, index_father) in $router.options.routes" :key="index_father" :index="index_father+''">
            <!-- 这个菜单的标题和图标 -->
            <template slot="title"><i class="el-icon-message"></i>{{item_father.name}}</template>
            <!-- 菜单字节点  index在这里作用是高亮选择,index一定要保证唯一性 -->
            <el-menu-item  v-for="(item_son, index_son) in item_father.children" :key="index_son" :index="item_son.path" :class="$route.path==item_son.path ? 'is-active':''">{{item_son.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
            <router-view></router-view>
        <el-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

通过网址进行高亮、以前只能通过点亮到地址

:class="$route.path==item_son.path ? 'is-active':''"

2.router/index.js

我们一打开页面，用哪个子路由组件进行填充

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import PageOne from '../views/PageOne.vue'
import PageTwo from '../views/PageTwo.vue'
import PageThree from '../views/PageThree.vue'
import PageFour from '../views/PageFour.vue'
import App from '../App.vue'
import Index from '../views/Index.vue'
Vue.use(VueRouter)
const routes = [
  // 导航1
  {
    path: '/',
    name: '导航1',
    component: Index,
    redirect:'/pageone',  // 当我们访问到父路径 / 的时候，用这个子组件填充父组件并展示
    children: [  // 二级路由
      {
        path: '/pageone',
        name: 'pageone',
        component: PageOne
      },
      {
        path: '/pagetwo',
        name: 'pagetwo',
        component: PageTwo
      },
    ]
  },
  // 导航2
  {
    path: '/navigation',
    name: '导航2',
    component: Index,
    children: [
      {
        path: '/navigation/pagethree',
        name: 'pagethree',
        component: PageThree
      },
      {
        path: '/navigation/pagefour',
        name: 'pagefour',
        component: PageFour
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

116.【SpringBoot和Vue结合-图书馆管理系统】（四）

4.问题探究-(多级路由问题)⭐⭐⭐

(1).问题展现

(2).解决问题

(3).问题总结 ⭐⭐⭐

5.左侧菜单页与右侧页面交互

(1).三个基本步骤

(2).开始搭建

热门文章

最新文章

相关课程

相关电子书

相关实验场景