在vue-cli3中使用axios获取本地json操作

在vue-cli3中，公共文件夹由static变成了public

先把要访问的json放到public文件夹下

使用axios的get方法获取，不能用post，不然会报404

axios.get(`./china-main-city/100000.json`)
     .then((data) => {
      console.log(data)
     })

补充知识：两个不同的路由，引入相同的组件

从不同的按钮进入到详情页,两个不同的路由,相同的组件

主要是从不同按钮进入不同路由的页面,内容一致,但是title不一样,怎么写

index.js

const businessDetail = _import('business/detail')

第一个页面

第二个页面

这就是不用的路由引入相同的path,当然先可以新开页面,再引入第一个页面的内容，但是没有必要～～～～

以上这篇在vue-cli3中使用axios获取本地json操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • 在vue中读取本地Json文件的方法

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • vue-cli 引入、配置axios的方法

    一.npm 安装axios,文件根目录下安装,指令如下 npm install axios --save-dev  二.修改原型链,在main.js中引入axios import axios from 'axios'  接着将axios改写为Vue的原型属性, Vue.prototype.$http=axios  这样之后就可在每个组件的methods中调用$http命令完成数据请求 三.在组件中使用 methods: { get(){ this.$http({ method:'get', ur

  • VUE中使用HTTP库Axios方法详解

    VUE中使用HTTP库Axios方法详解

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 安装Axios模块 在Vue中使用,最好安装两个模块axios 和vue-axios $npm install axios vue-axios --save 然后引用并使用模块 import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios) 在组件中通过如下方式进行使用 this.$http[meth

  • 在vue-cli3中使用axios获取本地json操作

    在vue-cli3中,公共文件夹由static变成了public 先把要访问的json放到public文件夹下 使用axios的get方法获取,不能用post,不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console.log(data) }) 补充知识:两个不同的路由,引入相同的组件 从不同的按钮进入到详情页,两个不同的路由,相同的组件 主要是从不同按钮进入不同路由的页面,内容一致,但是title不一

  • vue项目中使用axios上传图片等文件操作

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 首先安装axios: 1.利用npm安装npm install axios –save 2.利用bower安装bower install axios

  • vue里的axios如何获取本地json数据

    vue里的axios如何获取本地json数据

    目录 使用axios获取本地json数据 使用axios获取本地json文件,报404错 解决方案:main.js里 使用axios获取本地json数据 第一步:在已有的vue项目中安装axios命令 npm install --save axios 第二步:在main.js里导入下面的代码 import axios from 'axios' 第三步:在static文件夹下添加testData文件夹,在这个文件夹下添加data.json文件 第四步:在需要数据的页面引入axios,异步加载数据

  • vue:axios请求本地json路径错误问题及解决

    vue:axios请求本地json路径错误问题及解决

    目录 axios请求本地json路径错误 axios的基础路径如何设置 举个栗子吧↓ 步骤一:入口文件:main.js 步骤二:组件:newList.vue axios请求本地json路径错误 本例用的是vuecli4,json等静态资源存放在public文件夹中 返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路

  • 如何在Vue项目中使用axios请求

    在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装 首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题 如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =

  • Vue项目中封装axios的方法

    Vue项目中封装axios的方法

    目录 一.axios是什么 特性 基本使用 二.为什么要封装 三.如何封装 设置接口请求前缀 设置请求头与超时时间 封装请求方法 请求拦截器 响应拦截器 小结 参考文献 一.axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端.自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios.现在 axios 已经成为大部分

  • 在vue项目中,使用axios跨域处理

    跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无法自己独立的搭建一个服务器,所以就变成了一个尴尬的事情 当然,有很多的虚拟服务器,能够解决跨域问题,他们的实质都是通过后台取与后台沟通,从而委婉的解决跨域问题正好,webpack正有这种功能,所以vue-cli也是有解决跨域的能力 当然,不可能我们直接发送ajax就成功,对吧,我们肯定要修改配置文件 代码: dev: { env: require('./dev.env'), port: 8080, a

  • Vue-cli项目获取本地json文件数据的实例

    在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件中,并且通过异步请求获取到,然后加载数据. axios.get('http://localhost:8080/datas/json') 然而在这一过程中,我的访问总是404.通过查阅,我发现,在vue-cli基础上构建的项目中,只有static目录才是vue-cli向外暴露的静态数据文件夹,我放在static下的图片可以正常访问到,我是在static同级目录新建了datas目录,将json文件放入datas目录

  • vue项目中js-cookie的使用存储token操作

    1.安装js-cookie # npm install js-cookie --save # yarn add js-cookie 2.引用(需要的文件) import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(tcuncuoken) { return Coo

随机推荐