2022-07-06 vue项目-通用后台管理系统(五) 创建welcome,users,rote,product等页面作为home主页Main部分的动态渲染的子路由

一.使用router-view把home页的Main做成动态渲染,以方便后续动态显示每个侧边栏菜单选项对应的内容

1,创建views/welcome.vue页作为home的子路由

随便写个页面样式如下:

<template>
  <div class="welcome">
    <div class="content">
      <div class="sub-title">欢迎体验</div>
      <div class="title"> 通用后台管理系统</div>
      <div class="desc">
        打造通用后台管理系统
      </div>
    </div>
    <div class="img"></div>
  </div>
</template>

<script>
 
 
export default {
  name: 'welcome',
  props:[],
  components: {
   
  },
  data() {
    return {
       
    };
  },
  //方法 函数写这里
  methods: {},
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {},
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {},
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {

  },
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
   //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
}
</script>


<style lang="scss"  scoped>
.welcome {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  .content {
    position: relative;
    bottom: 10px;
    .sub-title {
      font-size: 30px;
      line-height: 42px;
      color: #333;
    }
    .title {
      font-size: 40px;
      line-height: 62px;
      color: #409eff;
    }
    .desc {
      text-align: right;
      font-size: 14px;
      color: #999;
    }
  }
  .img {
    margin-left: 105px;
    background-image: url("https://s3.bmp.ovh/imgs/2021/08/0601792d1a8b6476.png");
    width: 371px;
    height: 438px;
  }
}
</style>

2.router/index.js中注册为home的子路由

 {
   path: '/home',
   name: 'home',
   component: Home,
   redirect:'/home/Welcome',
   children:[
     {path:'Welcome',component:Welcome},
   ]
 }

3.在home.vue中的Main使用router-view

<!-- 2.2.主体内容 -->
<el-main>
  <router-view></router-view>
</el-main>

二.动态路由匹配sidebar:点击Aside不同选项,Main也显示对应的内容【难点】

1.了解element-ui的:router模式

官网位置:https://element.eleme.cn/#/zh-CN/component/menu#menu-attribute

2.如何理解上图中的"以index作为path作为路由跳转"?

官网说得太简略,自己理解如下:
重要信息:以index作为path作为路由跳转
比如数据库中的:id和subitem.id
subitem.path就是对标左边的path,
最后把对应的子路由写上去,什么user,rote,product等等

3.具体实现

step1:el-item标签中引入:router

<el-menu 
  default-active="2"
  class="el-menu-vartical-demo"
  :unique-opened="true"
  background-color="#121a2a"
  text-color="#fff"
  :router="true"
>

表示启用vue-router模式

step2:把二级菜单的标签名从el-submenu改成el-menu-item

<!-- 一级菜单下的二级菜单 -->
<el-menu-item :index="subitem.path" v-for="subitem in item.child" :key="subitem.id">

表示二级菜单下面没有子标签了

效果:展开的二级菜单没有那个向上的箭头(^)了

step3:让展开的二级路由可以实现点击后跳转到对应的子路由

• 创建Components文件夹下的Rote.vue,User.vue和Product.vue,随便写点样式结构
• 在router/index.js中引入和注册为home组件的子路由

...
import Welcome from '../views/Welcome.vue'
import Users from '../components/Users.vue'
import Rote from '../components/Rote.vue'
import Product from '../components/Product.vue'

Vue.use(VueRouter)
// 在routes里配置路径
const routes = [
...
  {
    path: '/home',
    name: 'home',
    component: Home,
    redirect:'/home/Welcome',
    children:[
      {path:'Welcome',component:Welcome},
      {path:'Users',component:Users},
      {path:'Rote',component:Rote},
      {path:'Product',component:Product}
    ]
  },

]

• 效果