目录
在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>
效果如下: