vue配置路由来访问后台接口

最新推荐文章于 2024-05-23 16:41:16 发布
最新推荐文章于 2024-05-23 16:41:16 发布
阅读量2.4k 收藏 7
点赞数
分类专栏： 前端 文章标签： vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43719616/article/details/110370066
版权

步骤一：安装axios，在横线处输入npm install --save axios
在这里插入图片描述
步骤二：导入路由对象，并通过Vue.use()来引入
在这里插入图片描述
步骤三：组件映射配置，换言之，就是你要怎么访问你自己新建的vue文件
在这里插入图片描述
步骤四：在入口文件main.js文件中引入路由文件
在这里插入图片描述
步骤五：在入口文件main.js中写要访问后台的接口地址
在这里插入图片描述
步骤六：在App.vue中输入router-view标签，路由匹配到的组件将渲染在这里
在这里插入图片描述
that‘s alllllll over

日京
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目
qq_43055855的博客
10-21 1796
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
vue 实现动态路由的方法
11-19
在Vue.js应用中，动态路由是一种非常实用的功能，它允许我们根据不同的条件或者从服务器获取的数据来决定应该显示哪个组件。这种技术常用于权限管理，确保用户只能访问他们被授权的页面。以下是如何在Vue中实现动态...
nginx部署vue项目，路由配置，后端访问接口配置
weixin_45393413的博客
08-22 7269
nginx部署vue项目，配置前端项目访问子路径，后端访问接口路径配置
前端vue2与后端接口的简单联调步骤
最新发布
qq_70786441的博客
05-23 687
创建俩个包 utlis 和api（不确定谁便起）再在包里创文件夹 request.js impus.js。import create from "../utils/request"把request.js调过来。baseURL:"http://localhost:8083",自己后端的端口号。timeout:5000后端传给前端的时间。在 request.js把axios调过来。安装axios npm i axios。impus.js里写的是接口。在main.js里写。在main.js里写。
vue3在main.js做请求
范天缘的博客
01-06 1778
有时候需求进入页面调用用户权限接口 这时候在main.js请求是最好的 main.js请求写法 const getUpdateTime = (async()=>{ let params = {} const res = await $http(params,'getUpdateTime'); }) getUpdateTime()
# Vue 配置前端后端路由地址
不积跬步，无以至千里；不积小流，无以成江海
11-22 1万+
Vue学习（一） 配置后端项目地址 proxyTable: { '/api': { //使用"/api"来代替 target: 'http://127.0.0.1:8000', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http:/...
前后端分离项目之登录页面(前后端请求、响应和连接数据库)
weixin_63541561的博客
06-03 2913
目录一、前端登录发起请求二、后端请求接收三、连接数据库四、后端响应五、前端处理六、在前端验证用户是否登录七、web会话跟踪八、请求拦截器和响应拦截器. web会话跟踪：http是无状态的，登录完成后客户端与服务器断开了连接，之后再向后端发送请求，后端就不知道是哪个客户端发送的。
【备忘录】从头搭建VUE项目，配置ROUTE路由，并使用AXIOS跨域访问后端
Xcong_Zhu的博客
11-18 2649
学习笔记整理
Vue结合路由配置递归实现菜单栏功能
10-15
菜单数据通常会存储在后台数据库中，并通过API接口获取。这里为了简化，我们将模拟一些静态数据： ```javascript // src/components/Menu.vue (item, index) in menuList" :key="index"> || '#'">{{ item.name...
Vue后台Vue后台Vue后台Vue后台Vue后台
01-07
访问路径是指用户访问后台管理系统的入口地址。在本例中，访问路径为http://localhost:8080/项目名称/admin/dist，后面跟着是hash值#/login，这表示用户将被重定向到登录页面。在实际开发中，访问路径可能会根据项目...
基于vue3+elementPlus的后台管理系统模板
02-18
3. **设计路由**：利用Vue Router进行页面路由配置，实现各个功能模块间的跳转。 4. **权限管理**：可以使用Vuex进行状态管理，实现用户登录、权限控制等功能。 5. **接口对接**：与后端API进行通信，通常使用...
Vue项目 - 通用后台管理资料
05-05
前后端分离的项目中，前端需要通过HTTP请求与后台接口通信。Vue.js可以结合axios库来发送GET、POST等请求。了解如何配置axios，设置请求头，处理响应数据，以及错误处理等技巧。 8. **组件化开发**： Vue的核心...
SpringBoot+Vue从零开始做网站5-前端vue项目全局路由和一些配置
sunon_的博客
05-20 635
vue项目创建好了并且集成了基础的后台管理系统，调用后端接口也调通了。接下来就是开发后台管理系统的其他功能了，首先就是把相关路由和一些基础工具配置一下。 vue的全局路由配置，router/index.js 代码： import{createRouter,createWebHashHistory,createWebHistory}from"vue-router"; importHomefrom"../views/admin/Home.vue"; import{authtoken}...
vue项目路由跳转及请求接口流程
weixin_43923665的博客
08-16 4686
vue-router和axios的简单学习与应用
VUE前端项目，访问不到后台
weixin_45471564的博客
04-12 2655
1，检查访问路径，是否正确 2，路径正确的情况下， 2.1 访问本地后端项目，代码在服务器（其他电脑）上，没跟新 2.2 访问服务器（其他电脑也可当作服务器）的后端，代码在本地，没提交
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
qq_45801301的博客
10-24 3680
vue实现路由跳转到新页面，返回旧页面，保留之前的数据记录
vue3最全路由使用教程
热门推荐
begefefsef的博客
03-06 2万+
路由介绍我再此之前发布过vue2的基本使用，想要了解的可以去vue2路由教程 下面开始上手路由 认识vue-router 目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装Vue Router：npm install vue-router@4 路
如何在main.js中调用接口并且访问vuex中的数据
亚洲的博客
05-24 4545
一般情况下，都是在router.beforeEach((to, from, next) => {}中使用。 1、调用接口，能在这调用接口的一般都是使用get来获取数据 直接 Axios.get(接口).then(res=>{}).catch(err=>{}),就可以调用接口了 2、访问vuex中的数据 想要获取或操作vuex中的数据， 获取数据： id: store.state.id 操作数据： store.state.id=res.data.data.id ...
Vue项目手把手教你：一个vue项目和后端进行交换
热爱编写程序的药学在读书
02-26 9102
我们创建的项目如下 1、我们Vue项目执行流程 得到如下的一个格式有，渲染流程如下 首先我们的主要的页面就一个（public下面的index.html） 其实就我们的App.vue渲染到我们的index.html（我们的项目只有一个app的一个id） 整体上做如下修改（我们需要的资源在main.js里面导入） 总体的过程呢就是如下的 首先我们在components下面创建我们的组件 然后在router下书写路由 然后其他的就后面学习到了再总结 2、开发我们的登录组件 在我们compone
vue管理后台，怎么写动态路由配置路由权限
05-25
在Vue管理后台中，动态路由配置和路由权限可以通过以下步骤来实现： 1. 在路由配置文件中定义需要动态添加的路由，例如： ``` const router = new Router({ routes: [ { path: '/', name: 'home', component:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值