后台管理系统——03解决联动效果以及面包屑导航以及添加Echarts

目录

vue 监听$route的方式

---

在common/config/router.js中的layout写子组件路由

之前：

const routes = [
    {
      path: '/',
      name: 'layout',
      /* component: () => import('@/views/layout.vue') */
      component:'layout',
    },
    {
        // 这里就不用写path以及name，下面的函数已经给封装好了
      /* component: () => import('@/views/Login.vue') */
      component:'Login',
    },
    {
      path: '*',
      redirect:{name:'layout'}, 
    }
  ]

现在：

const routes = [{
		path: '/',
		name: 'layout',
		redirect:{name:'index'},
		/* component: () => import('@/views/layout.vue') */
		component: 'layout',
		children: [{
			meta: {title: '后台首页'},
			component: 'index/index'
		},
		{
			meta: {title: '商品列表'},
			component: 'shop/goods/list'
		}
		]
	},
	{
		/* component: () => import('@/views/Login.vue') */
		component: 'Login',
	},
	{
		path: '*',
		redirect: {
			name: 'layout'
		},
	}
]

把views文件夹中的格式改成以下形式方便跳转对应的链接

在shop/goods下新建list.vue页面

在router/index.js中添加防止出现重复导航的错误

//解决vue路由重复导航错误
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

 接下来让头部进行跳转

数据结构如下：

      collapse: false,
      navBar: {
        active: "0",
        list: [
          {
            name: "首页",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-home",
                name: "后台首页",
                pathname: "index",
              },
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "商品",
            subActive: "0",
            submenu: [
              {
                icon: "el-icon-s-claim",
                name: "商品列表",
                pathname: "shop_goods_list",
              },
            ],
          },
          {
            name: "订单",
          },
          {
            name: "会员",
          },
          {
            name: "设置",
          },
        ],
      },

头部的方法：

    // 路由跳转
      this.$router.push({
        name:this.submenus[0].pathname
      })

这里只需要用roueter.push({name})更改名称即可

---

点击后：

---

点击前： 

 

---

侧边导航栏的路由跳转

      // 路由跳转
      this.$router.push({
        name: this.submenus[key].pathname,
      });

因为路径也有可能是【】，所以要写个if语句判断

      if (this.submenus.length > 0) {
        this.$router.push({
          name: this.submenus[0].pathname,
        });
      }

---

制作面包屑导航

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

获取当前路由对象this.$route

this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。 

    // 面包屑导航
    getBreadCrumb() {
      var getobj;
      getobj = this.$route
      console.log(getobj);
    },

filter：过滤没有name的结构，只显示有name的结构

    // 面包屑导航
    getBreadCrumb() {
      // 过滤出matched中的name
      var getobj = this.$route.matched.filter((v) => v.name);
      console.log(getobj);
      // 把三个参数放在新数组中
      let arrs = [];
      getobj.forEach((v) => {
        // 如果它的路径是layout页面或者是name为index页面，那么就不显示。因为首页是不需要显示面包屑
        if (v.name === "layout" || v.name === "index") {
          return;
        }
        arrs.push({
          name: v.name,
          path: v.path,
          title: v.meta.title,
        });
      });
      if (arrs.length > 0) {
        arrs.unshift({
          name: "index",
          path: "/index",
          title: "后台首页",
        });
      }
      this.arr = arrs;
      console.log(this.arr);
    },

放在mouted中调用此方法

---

vue 监听$route的方式

$route 作为vue实例的一个响应式属性，和在data中写的属性本质上是一样的，都可以通过this的方式拿到。既然你可以监听data中的属性变化，同样也可以监听 $route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。

所以这里要写一个监听器用来监听属性的变化

  watch: {
    $route(to, from) {
      if (to.name === "index") {
        this.navBar.active = "0";
        this.slideMenuActive = "0";
      }
      this.getBreadCrumb();
    },
  },

 为什么要用watch来监听呢？官网给出了详细的解释

 当我们点击首页的时候只是希望对参数进行变化，而不是组件被复用。

el-main组件中  渲染面包屑导航的数据，写入以下代码：

<el-breadcrumb separator-class="el-icon-arrow-right" v-if="arr.length > 0">
   <el-breadcrumb-item :to="{ path: item.path }" v-for="(item, index) in arr" :key="index">            
      {{ item.title }}
   </el-breadcrumb-item>
</el-breadcrumb>

在子路由中新建index文件夹下的index.vue放入Echarts 图表

引入方式 

npm install echarts --save

安装完成后再次启动项目可能会报错，这时重新安装一下npm install即可

index.vue

<template>
  <div >
    <div style="width:50%;text-align:center">
       <div ref="main" style="height:300px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Index",

  data() {
    return {};
  },

  mounted() {
     this.chart()
  },

  methods: {
    chart() {
      var myChart = echarts.init(this.$refs.main);
      var option;

      option = {
        title: {
          text: "Basic Radar Chart",
        },
        legend: {
          data: ["Allocated Budget", "Actual Spending"],
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);

    },
  },
};
</script>

<style lang="scss" scoped>
</style>

最后在layout.vue中使用<router-view />进行渲染即可

<router-view></router-view>

 效果如下：