在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>
效果如下：
