“音乐会治愈我,运动会治愈我,风景会治愈我,阅读会治愈我,做饭也会治愈我,还有阴雨天的被窝,周末可以肆无忌惮的赖床,我的意思是,我们应该热爱生活。”
WeChat
引子
使用 v-for
进行遍历的时候,正常写的相对路径引入,结果页面引入图片资源失败了
这是之前指定路径的方式
{
path: '/NanEverydayMatters',
name: 'NanEverydayMatters',
component: () => import('@/views/NanEverydayMatters'),
meta: {
title: '日常事务',
icon: '../../assets/日常事务.png'
}
}
解决方案
require(相对路径)
注意这里面的相对路径是相对于当前这文件而言的图片相对路径,不是相对渲染组件而言的
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/Layout'
Vue.use(VueRouter)
export const AsideRoutes = [
{
path: '/',
component: Layout,
redirect: '/Home',
children: [
{
path: '/Home',
name: 'home',
component: () => import('@/views/NanHome'),
meta: {
title: '首页',
icon: { url: require('../assets/首页.png') }
}
},
{
path: '/NanAssessmentManagement',
name: 'NanAssessmentManagement',
component: () => import('@/views/NanAssessmentManagement'),
meta: {
title: '考核管理',
icon: { url: require('../assets/考核管理.png') }
}
},
{
path: '/NanIdeologicalAndPoliticalTeam',
name: 'NanIdeologicalAndPoliticalTeam',
component: () => import('@/views/NanIdeologicalAndPoliticalTeam'),
meta: {
title: '思政队伍',
icon: { url: require('../assets/思政队伍.png') }
}
},
{
path: '/NanPersonalInformation',
name: 'NanPersonalInformation',
component: () => import('@/views/NanPersonalInformation'),
meta: {
title: '个人信息',
icon: { url: require('../assets/个人信息.png') }
}
},
{
path: '/NanStudentFinancialAid',
name: 'NanStudentFinancialAid',
component: () => import('@/views/NanStudentFinancialAid'),
meta: {
title: '学生资助',
icon: { url: require('../assets/学生资助.png') }
}
},
{
path: '/NanAwardsAndAwards',
name: 'NanAwardsAndAwards',
component: () => import('@/views/NanAwardsAndAwards'),
meta: {
title: '评奖评优',
icon: { url: require('../assets/评奖评优.png') }
}
},
{
path: '/NanWorkStudy',
name: 'NanWorkStudy',
component: () => import('@/views/NanWorkStudy'),
meta: {
title: '勤工俭学',
icon: { url: require('../assets/勤工俭学.png') }
}
},
{
path: '/NanDisciplinarySanctions',
name: 'NanDisciplinarySanctions',
component: () => import('@/views/NanDisciplinarySanctions'),
meta: {
title: '违纪处分',
icon: { url: require('../assets/违纪处分.png') }
}
},
{
path: '/NanCondominiumManagement',
name: 'NanCondominiumManagement',
component: () => import('@/views/NanCondominiumManagement'),
meta: {
title: '公寓管理',
icon: { url: require('../assets/公寓管理.png') }
}
},
{
path: '/NanEverydayMatters',
name: 'NanEverydayMatters',
component: () => import('@/views/NanEverydayMatters'),
meta: {
title: '日常事务',
icon: { url: require('../assets/日常事务.png') }
}
}
]
}
]
const router = new VueRouter({
routes: [
{
path: '/login',
component: () => import('@/views/NanLogin')
},
{
path: '/404',
component: () => import('@/views/404')
},
...AsideRoutes
]
})
export default router
<template>
<div class="LayoutMenu-container">
<el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
<el-menu-item v-for="(item, index) in menuList" :key="item.path" :index="1 + index.toString()" @click.native="CheckViews(item.path)">
<img :src="item.meta.icon.url" class="el-menu-item-img_menuIcon">
<span class="el-menu-item-span_title" slot="title">{{item.meta.title}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
小结
记录一次报错
谢谢款待
2024
2
5