首先修改一下config文件夹下面的index.js文件里面的配置,如下:

然后 ,通过axios 请求配置的接口

<script>
import axios from 'axios'
export default {
name: 'List',
data(){
return {
list:[]
}
},
mounted(){
this.getData();//调用获取数据函数
},
methods:{
//定义页面跳转函数
goDetail(e){
const id=e.currentTarget.getAttribute("id");
const name=e.currentTarget.innerText;
this.$router.push({
path:'detail',
query:{id:id, name:name}
})
},
//定义获取数据函数
getData(){
axios.get('/api/index.json').then((res)=>{
if(res.status==200){
this.list=res.data.data.list;
}
}).catch((error)=>{
console.log(error);
})
}
}
}
</script>

  

axios获取本地文件配置步骤的更多相关文章

  1. .NetCore获取json文件配置内容

    .netcore中的数据配置及内容用了json文件代替了之前framework的xml文件,那么json中的数据该怎么获取呢?下面讲解json文件在.net core中的获取方法. 首先,新建一个.n ...

  2. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  3. 使用WWW获取本地文件夹的XML配置文件

    Unity3D读取本地文件可以使用Resources.Load来读取放在Resources文件夹下的文件,如果不是放在该文件夹下,则可以通过WWW类来读取. 譬如读取xml的配置文件. /// < ...

  4. iOS 获取本地文件的各种坑

    1.无论:TXT,EPUB,PDF等各种格式的文件,保存到本地的时候,最好都保存成字母或者数字,不要保存成汉字,否则,在取文件的时候,由于编码的问题,各种瓦特 2.如果文件名真的保存成了汉字,那么进行 ...

  5. javascript 学习笔记 -- js获取本地文件信息

    JavaScript是跑在浏览器中,所以对于JavaScript读取本地文件不想c++ 和 java那样easy.网上有很多关于读取本地文件的方法,许多是用ActiveXObject控件.Active ...

  6. 使用axios获取本地json数据

    1. 通过搜索 网上说不放在static文件夹中会报错  但是一直报错  放到根目录下的时候不报错了 2. 在main.js中引入axios import axios from 'axios' 3. ...

  7. 前端用js获取本地文件的内容

    这里要写成input的形式 调用upload函数 传递的参数就表示所选的文件<input type="file" onchange="upload(this)&qu ...

  8. 在vue-cli3中使用axios获取本地json

    在vue-cli3中,公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取,不能用post,不然会报404 axios..json` ...

  9. JS获取本地文件并且解析文件内容(XML,TXT)

    $(function(){ $("body").on("change", "#file", function (event) { uploa ...

随机推荐

  1. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

  2. sublime推荐插件

    SyncedSidebarBg:侧边栏底色统一 Emmet:集合多种功能,大名鼎鼎的 Zen coding ==> 不过对于嵌入式的我没多大用啊 Sublime CodeIntel:代码提示 A ...

  3. Oracle如何杀同库不同实例的会话

    今天处理了一个生产上的问题,主要就是杀会话, 生产环境是Oracle11gR2 RAC:有同事开发报表,报表工具连接到数据库上特别嚣张,把内存pin住: Select s.INST_ID, s.Mac ...

  4. webpack 集成 Typescript && Less

    webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...

  5. Ubuntu14.04.1LTS不能上网解决方法之一

    我们在装好了Ubuntu之后,打开浏览器,显示Server not found. 1.点击网络图标,显示如下: 2.进入etc/NetworkManager,找到 Networkmanager.con ...

  6. nginx proxy_pass设置

    NGINX服务器的反向代理PROXY_PASS配置方法讲解 https://www.cnblogs.com/lianxuan1768/p/8383804.html Nginx配置proxy_pass转 ...

  7. 解决虚拟机克隆的linux系统ip无法正常使用问题

    当我们克隆centos虚拟机无法正常获取IP地址,重启网卡也提示Bringing up interface eth0:  Device eth0 does not seem to be present ...

  8. qfile读取txt文件

    QFile f("D:\\测试数据\\单波束数据\\灯浮.TGT"); if (!f.open(QIODevice::ReadOnly|QIODevice::Text))//打开指 ...

  9. 并查集(Disjoint Set Union,DSU)

    定义: 并查集是一种用来管理元素分组情况的数据结构. 作用: 查询元素a和元素b是否属于同一组 合并元素a和元素b所在的组 优化方法: 1.路径压缩 2.添加高度属性 拓展延伸: 分组并查集 带权并查 ...

  10. 【JavaWeb项目】一个众筹网站的开发(七)后台用户菜单

    mvn命令不能运行: jar-war-pom之间是可以直接写,优先找这个工程,而不是仓库的位置 pom-pom子父关系,需要去仓库中找,我们需要使用<relativePath>../pro ...