使用Vue构建axios url以从路由器参数获取
，可以通过以下步骤实现：
- 首先，在Vue组件中引入axios和Vue Router：
import axios from 'axios';
import router from '@/router'; // 假设路由器实例已经在Vue项目中配置好- 在Vue组件中定义一个方法，用于构建axios的url：
methods: {
buildUrlFromRouterParams() {
const { id } = this.$route.params; // 假设路由参数中有一个名为id的参数
const baseUrl = 'https://api.example.com'; // 假设API的基础URL
// 构建完整的URL
const url = `${baseUrl}/users/${id}`;
return url;
},
},- 在需要发送请求的地方调用该方法，并使用axios发送请求：
methods: {
async fetchData() {
const url = this.buildUrlFromRouterParams();
try {
const response = await axios.get(url);
// 处理响应数据
} catch (error) {
// 处理错误
}
},
},这样，通过从路由器参数获取的值构建的URL，可以用于发送axios请求。根据具体的业务需求，可以在构建URL的过程中添加其他参数或路径。
对于Vue和axios的详细介绍和使用方法，请参考以下链接：
- Vue官方文档：https://cn.vuejs.org/
- axios GitHub仓库：https://github.com/axios/axios
请注意，以上答案仅供参考，具体实现方式可能因项目需求和开发环境而有所不同。
相关·内容
在我的Vue应用程序中，我有一个循环通过api的帖子的主页视图 http://jsonplaceholder.typicode.com/posts/ 使用Axios是我的index.js文件 import axios from 'axios'
export default {
fetchPosts () {
return axios
.get('http://jsonplaceholder.typicode.com/posts/')
.then(response => response.data)
}
} My
浏览 22提问于2020-04-03得票数 0
回答已采纳
当我使用dev构建Vue项目时，它可以正常工作。然而，一旦我运行npm run build并将dist中的文件移动到我的work服务器，Vue路由器似乎就不再工作了。
我试过移除历史模式，但这行不通。
Vue路由器
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import axios from 'axios'
Vue.use(Router)
const router = new Router
浏览 1提问于2019-07-02得票数 4
1回答
我用vue-cli 3创建了一个项目，所以我运行：
>vue create my-app;
>cd my-app
>vue add axios
在my \src\plugins\文件axios.js中使用以下代码创建vue：
"use strict";
import Vue from 'vue';
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL
浏览 1提问于2018-10-23得票数 7
回答已采纳
6回答
我使用的是皮尼亚和vue路由器4.x，但我在商店中使用这两种设备都有问题。每个人都是独立工作的，但不是一起工作的。
如果我用
import router from '../router'
路由器将工作，但皮尼亚失败了错误。
Uncaught ReferenceError: Cannot access 'useAuthStore' before initialization
at axiosroot.ts
@line let authStore = useAuthStore(pinia);
//这是axiosroot.ts
import axios from &
浏览 61提问于2022-01-12得票数 16
1回答
如果我需要总结我想要做的事情，那么在记录post页面时，数据将从数据库中提取，并列出axios。然后，当router-link被点击或通过Url domain.com/post/1自动点击时，当输入2条公理是按需创建的。但是我想要做的是，当您登录到post页面时，数据已经列出了，当您想从额外内容中提供一个详细条目时，我认为没有必要提出axios请求。在这种情况下，我想通过路由发送数据，但是我想不出怎么做。我可以绑定到@click函数，但是我想通过路由来完成它，而不需要我想要完成的click。当domain.com/post/1写在url上时，我想直接绑定它。提前谢谢你的答复。路由器
impor
浏览 7提问于2022-11-25得票数 0
2回答
我不能使用我的Vue.prototype.$http，因为我不知道如何使它在我的路由文件中可用。
axios.js
import Vue from 'vue';
import axios from 'axios';
// noinspection JSIncompatibleTypesComparison
const isDevelopmentMode = process.env.NODE_ENV === 'development';
// base URL for backend access
const backendUrl = (isD
浏览 4提问于2020-12-29得票数 0
回答已采纳
1回答
我在试用vue3时遇到了一些问题。 路由器是我的习惯。 import router from './router' 当我写的时候 createApp(App).use(Antd,VueAxios,axios,qs,router).mount('#app') 页面未加载正确的page.Vue路由器看起来无法工作，但当我写入 createApp(App).use(router,Antd,VueAxios,axios,qs).mount('#app') 起作用了！那为什么呢？ 代码：https://github.com/fangminghui/app
浏览 26提问于2020-11-25得票数 1
回答已采纳
1回答
我挣扎着使用Axios，而useRoute使用Axios和Composition。下面是关于如何在使用选项API中使用它的代码，如何重新创建它，Vue-路由器文档目前还没有很好的文档。
async created() {
const result = await axios.get(`https://localhost:5001/api/artists/${this.$route.params.id}`
);
const artist = result.data;
this.artist = artist;
},
浏览 1提问于2021-04-30得票数 0
回答已采纳
我使用vue-路由器链接从一个“索引”页面列出了一个资源的记录，我有一个路由器链接带您通过一个页面为单个记录。该路径正常工作，但我无法通过API响应仅为该记录。
在控制台中，我得到404：
获取.$route.params.slug 404 (未找到)
从Devtools，我的数组是空的
$route错误:Array 10:Error gin:Array
router.index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '
浏览 1提问于2018-05-13得票数 0
回答已采纳
我只是简单地用列表页和详细页面(Item.vue)创建一个应用程序。从列表中，用户可以使用url访问细节页面，比如localhost/item/12345。但是我不能用VueJS和Vue-路由器为我的Laravel应用程序创建逻辑。
Laravel 5.4，
国家预防机制3.10.10，
axios 0.15.3，vue 2.3.4，vue-路由器2.6.0
我的代码如下所示
Example.vue (用作列表页)
<template>
<p class="card-text"><router-link v-bind:to="{ name
浏览 1提问于2017-06-27得票数 1
回答已采纳
1回答
我试图从显示在details视图中的API url获取详细信息。单击路由器链接后，它会转到id的路由，但细节不会显示，因为在获取请求中，我似乎没有到达id。
如何在Vue中传递提取函数中的id？
HomeView.vue
<template>
<div class="home">
</div>
<div>
<button @click="getPosts">Load scents</button>
<h3 v-if="errorMsg">{
浏览 4提问于2022-11-06得票数 0
我用的是Nuxt和Vue路由器和Axios。我看到Vue路由器有一个非常棒的特性叫做。
不幸的是，在下面的示例中，调用了我的beforeRouteEnter()函数，但在手动next()方法在fetchPageData(next)中调用之前，它似乎会退出并切换页面。
这里的正确模式是什么？
export default {
beforeRouteEnter (to, from, next) {
next(vm => {
vm.fetchPageData(next);
});
},
methods: {
浏览 5提问于2020-02-14得票数 9
回答已采纳
当使用cli和vue路由器构建vue.js应用程序时，我们可以将mode: 'history'传递到路由器，这将从url中删除散列。但是在通过cdn使用vue时，如何从url中删除#，例如在中
浏览 2提问于2020-06-09得票数 0
回答已采纳
1回答
我想显示从Axios库中提取的JSON信息。使用我的{{ id }}，我想在请求中调用某个param。
我有一个外部js文件.
const Home = {
template: `
<div class="user">
<h2>user {{ id }}</h2>
bet
</div>
`,
props: {
id: {
type: String,
default: 'N/A&
浏览 2提问于2019-01-12得票数 1
1回答
我试图将Vuejs应用程序转换为增量式使用类型记录，并面临一些构建问题。应用程序的package.json显示"@vue/cli-plugin-typescript": "^4.3.1", "typescript": "^3.5.2",
我能够通过a创建.d.ts文件来修复几个构建问题，例如:我通过使用import VueTour from 'vue-tour';创建vue-tour.d.ts文件修复了与main.ts中的vue-tour.d.ts相关的构建错误
b.在生成行错误之前添加// @ts-ignore。
浏览 0提问于2020-05-06得票数 0
回答已采纳
我开始这个项目的方式如下。
vue init nuxt/express
我的目录是..。
components
|- slider.vue
|- list.vue
pages
|- index.vue
组件是，
index.vue
<template>
<my-slider/>
<my-list/>
</template>
<script>
import MySlider from '~components/slider'
import MyList from '~components/list'
浏览 1提问于2017-06-25得票数 1
回答已采纳
我有一个nuxt SSR应用程序，并且我正在使用发出一个HTTP请求。当我使用axios从我的服务器得到一个错误时，我想把带有vue路由器的错误消息作为道具传递到我的错误页面，我已经将这个页面设置为nuxt details 。
我目前在我的错误布局页面中使用。如何通过Vue路由器将错误消息作为道具传递到/layouts/error.vue中的错误页面？我试着像这样传递道具：
router.push({ path: '/error', name: 'error', params: {error: error.response.data}})
但是，错误页上的pro
浏览 6提问于2021-11-01得票数 1
我刚开始使用VUE.JS，我很喜欢它！我喜欢vue路由器和路由器链接！他们太棒了！
现在，我有了一个由来自axios的数据填充的表，我希望在自定义方法中使用该数据构建一个链接，使团队名称可以单击。
在这里，模板：
<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"></BootstrapTable>
Axios返回ID、名称和其他用于将表更新为的数据
基本上，我需要使用axios接收到的数据更新表中的值
浏览 1提问于2019-06-25得票数 0
回答已采纳
正在开发的是Laravel 9、Vue 3和Vue-路由器4，
在前端路由工作很好..。但是有一次我只添加了一个beforeEach守卫。然后整个路由器停止工作
//this dont work
export const router = createRouter({
routes,
history : createWebHistory( import.meta.env.BASE_URL ),
linkActiveClass : 'active'
}).beforeEach( (to, from) => {
return true
})
浏览 35提问于2022-08-15得票数 0
1回答
我正在构建一个应用程序，使用Django Rest框架作为后端，Vue 3用于前端。在我的项目中使用Vuex和Vue路由器，还可以使用Axios在Vuex操作中使用API。但是，当从后端获取失败时，我想不出如何显示404页。我尝试了几种方法，比如将路由器导入vuex并使用router.push({name: 'notfound'})捕获错误，但没有奏效。你对如何做到这一点有什么想法吗？
router/index.js
...
{
path: '/route/:category',
name: 'filteredterms',
浏览 4提问于2021-03-23得票数 1
所以我在Laravel5.8应用程序中使用vue-auth和vue-路由器。有'/‘登陆页面，当我进入基本URL时，即:如果我在上启动了服务器，它就会显示登陆页面，但一旦登录并进入，它就会显示404。谁能帮上忙呢？我对Vue和Vue路由器很陌生。
下面是router.js auth.js和app.js的代码片段
router.js
// Pages
import Login from './components/Login'
import Landing from './components/Landing'
import Home from '
浏览 0提问于2019-08-27得票数 2
回答已采纳
我有一个现有的用户界面，我想把它转换成vue js，但是视图有点复杂。我有一个像这样的应用程序：
在标记为1的图像中，我有“
header.vueproducts.vue
这是密码
<template>
<div id="app">
<Header />
<router-view/>
</div>
</template>
<script>
import Header from './components/layout/Header';
expo
浏览 2提问于2020-11-21得票数 0
2回答
我正在Vue 3上构建一个应用程序，其中我为我的api调用构建了一个api类：
import axios from 'axios'
export default class {
/**
* Send GET Request
* @param {string} url
* @return {Promise}
*/
get(url) {
return new Promise((resolve, reject) => {
axios.get(url, {}).then(resp
浏览 6提问于2022-06-21得票数 1
1回答
我一直试图使用axios来用Vue加载数据，但是得到了未定义的错误。我很确定我的代码没有什么问题，因为它适用于其他人。我认为问题是在axios有机会获取数据之前就呈现了页面。
async editGoods(oldGoods) {
oldGoods.property1 = await this.$http.loadData("/item/someporperty/" + oldGoods.id);
oldGoods.property2 = await this.$http.loadData("/item/
浏览 2提问于2020-01-23得票数 2
我想在Ionic Vuejs项目中使用Ionic的代理功能。
我已经看过Ionic + Angular和Vue + Webpack代理问题的问答，但找不到我的Ionic + Vue问题的解决方案。
目前，我只是在浏览器中工作(也就是说，还没有为本机构建)。
我遵循了，我的ionic.config.json现在看起来像这样：
{
"name": "myapp",
"integrations": {
"capacitor": {}
},
"type": "vue&
浏览 14提问于2021-01-04得票数 0
1回答
如何在vuejs 3中使用多个插件？
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
createApp(App).use(router, axios, Antd).mo
浏览 6提问于2022-02-17得票数 0
回答已采纳
1回答
我正在尝试从wordpress端点上生成的JSON中获取一个对象。我最初的目标是在我为客户端构建的vue应用程序上显示来自wordpress中自定义字段的图像。 现在我只是试着测试我是否可以获取特定的对象，然后我将继续获取特定的图像url。 如何在json中获取"acf“对象？ 我是否应该过滤数据，只显示感兴趣的对象，在这里继续的最佳实践是什么？ 我编写的代码可以工作，它会获取json。但是，我尝试只获取https://backend.rogalandtt.no/wp-json/markers/v1/post中的特定对象"acf“。 通过将响应更改为"res.data
浏览 6提问于2019-08-29得票数 0
回答已采纳
我正在尝试使用axios从openweathermap获取数据，目前，我正在使用一些方法从用户浏览器获取经度和经度，然后调用构建url的函数来构建url。
url是正确构建的，没有任何问题，但是当我尝试用axios调用api时，奇怪的事情发生了(基本上我得到了我自己的页面html代码返回给我)。
代码如下：
let weather = new Vue ({
el: '#weather',
data: {
error: '',
apiUrl: '',
city: '',
country: &#
浏览 3提问于2018-06-29得票数 0
我在Vue.js中创建了一个具有以下配置的package.json项目
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"co
浏览 0提问于2020-09-02得票数 0
回答已采纳
我尝试发送带有vue和axios的post，from :href元素，但我不知道如何填充axios url参数from :href。
我试试这个：
<div id="follow">
<a :href="'{% url 'follow' recipe.added_by.id %}'" @click="followUser()">Obserwuj</a>
</div>
Href元素用Djan
浏览 0提问于2020-07-01得票数 0
我正在使用Spotify API与Vue合作一个项目，但在尝试获取访问令牌时遇到了困难。我使用axios发出请求，但每次我从服务器获得400状态时。
这就是我这样做的方式，我在我的Vuex商店的一个动作中有一个请求，我不确定我是否遗漏了什么。
axios({
method: 'post',
url: 'https://accounts.spotify.com/api/token',
params: {
grant_type: 'authorization_code',
浏览 10提问于2020-05-25得票数 1
您好，我想在另一个文件中实现vue路由器，但我得到一个错误：“在'./ router‘中找不到export 'default’(导入为'router')。” 提前谢谢。 // Import
import Vue from 'vue'
import axios from 'axios'
import VueMeta from 'vue-meta'
import { router }from './router'
import App from './pages/app'
// C
浏览 121提问于2019-12-13得票数 2
回答已采纳
我使用Axios从API中获取数据，并将它们作为卡片显示在组件电影卡中，问题是我希望能够单击单个电影卡，路由器带我到另一个页面(singlepage.vue)，其中包含来自API的电影id，并显示特定于图书的数据，但问题是，我不知道如何将输入的同一张电影卡的ID发送到API中，然后返回它的数据(我必须使用post方法请求并将我的post图像放在下面)。
firstPage.vue --这是我有电影卡的同一个组件。
<template>
<div class="articles">
<h2>featured articles
浏览 6提问于2022-05-06得票数 1
我正在生产一个web应用程序(back: Django rest框架，前台: vue-cli3)，但我的部署环境非常具体。我有一个部署Linux的嵌入式卡。此卡在局域网中运行，其IP地址由路由器通过DHCP管理。在这张卡上，有Django服务器和一个Nginx来管理Vuejs应用程序的构建。
我的问题是用卡的IP地址修改基本的URL (它在vue.js和我的服务器之间发出HTTP请求)，以便客户机上的vue-js应用程序可以与卡上的后端通信。
那么，在构建vue-js之后，您知道如何更改Axios的base_url吗？
提前感谢！为我可怜的英语感到抱歉，我是法国人
我测试放入另一个文件(c
浏览 0提问于2019-09-05得票数 3
3回答
我有什么？
具有必需路由和公共路由的路由器
具有用户自主状态的vuex
我想要什么:使用axios向服务器发送请求，在加载应用程序之前(在路由器被解析之前)检查用户的auth状态。
router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'
Vue.use(Router)
const router = new Router({
...
routes: [
{
path:
浏览 2提问于2018-09-20得票数 7
回答已采纳
1回答
我很难将数据(在本例中是userInfo-Token)从beforeEach(to, from, next) Vue-路由器中间件内部传递到编码应答Vue-组件。我正在处理Vue-SinglePage组件文件，如下所示：
App.js (入境点)
<template>
<div id="app">
<Navigation/>
<router-view/>
<Footer/>
</div>
</template>
Router.js
浏览 0提问于2018-03-15得票数 2
回答已采纳
我构建了一个基本的登录函数(后端用laravel编写)，我成功地执行了一个axios调用，但我无法显示主页组件，this.$router.push('/home');发生了变化，但ui保持不变。 我的Login.vue登录逻辑： login() {
console.log(this.getLoginData());
axios.post("/login", {
email: this.email,
password: this.password
})
浏览 19提问于2019-04-30得票数 1
当我请求后端时，我遇到了一个问题。Axios仍然将localhost作为基本url编写，并在此之后添加后端url。
GET 404 (未找到)
我试了几次。首先，我试图更改vue-router的基本url。在env.development中，我编写了一个VUE_APP_ROUTER_BASE_URL="/"，并将其添加到路由器配置中。
const router = new VueRouter({
mode: 'history',
base: process.env.VUE_APP_ROUTER_BASE_URL,
routes
浏览 4提问于2021-06-07得票数 0
1回答
在访问任何页面之前，除了登录和注册之外；我希望使用导航卫士对用户进行身份验证。下面您可以看到我的vue-路由器代码。“这里”将被记录，但导航不会在之后的行中取消。如果用户未通过身份验证，则仍有可能访问//me路由。
我的路由器文件：
import { createRouter, createWebHistory } from "vue-router";
import axios from "axios";
import HomeView from "../views/HomeView.vue";
import RegisterView from
浏览 7提问于2022-06-14得票数 0
回答已采纳
我有一个Vue3项目与SSR，Vue-Cli，Vuex和打字稿.
在路由器页面中，我需要将数据提交到Vuex商店。在.vue文件中，我只使用这个.$store，输入为vuex.d.ts，如下所示：
this.$store.commit("setFoo", "Bar")
但是，如何从没有此实例或vue实例的ts文件(路由器/index.ts)中执行此操作。
我尝试导入存储索引文件并提交：
import store from "@/store/index"
store.commit("setFoo", "Bar")
浏览 8提问于2021-08-31得票数 2
回答已采纳
1回答
我有多个像这样的条目
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
假设所有这些文件(index.js)都是相同的，唯一的变化就是其他路由的导入。
我会创建一个文件来保持干燥的原则，但我需要传递一些东西，以真正知道我想要导入哪个路由器。
例如，pageOne/index.js是
im
浏览 0提问于2019-10-31得票数 0
1回答
你好，我开始学习VUE 3与路由器，我不知道如何从id检索数据？请
我的控制台日志总是返回未定义的？
在这里，我的代码，你也可以看到代码框链接，如果你也想。
<script>
import axios from "axios";
export default {
name: "CharacterById",
props: ["id", "name", "species", "status"],
data() {
return {
character:
浏览 8提问于2022-07-31得票数 0
回答已采纳
1回答
我创建JS文件是为了从数据库获取令牌，并将其保存在会话sotorage中，然后将该文件导入到Vue中的app.js中：
import Auth from './auth/auth';
new Vue({
el: "#app_resource",
router,
store,
beforeMount() {
window.auth = new Auth();
},
render: h => h(App)
});
文件auth.js
import axios from 'axios'
浏览 0提问于2019-06-25得票数 0
2回答
祝大家今天愉快！当从web.php‘解锁’时，如下所示：
Route::get('/{page}', IndexController::class)->where('page', '.*');
路由器看起来如下：
import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)
export default new VueRouter({
mode: "history",
route
浏览 6提问于2022-08-05得票数 1
3回答
如何更新vue-路由器
、、、
我对vuejs很陌生，我使用vue cli 3。我有一个包含不同组件的项目。我有一个菜单组件，我从api(代码如下)中获取所有菜单项。我已经安装了vue-路由器，来做路由，但我的问题是，我不知道如何填充路由器对象内的路由数组。我找了很多东西，但没有任何帮助。
所以基本上没有用硬编码的路径填充路由，和组件。我想要自动填充从api中获得的项目。
<template>
<div class="Menu">
<nav class="navbar navbar-default navbar-custom">
浏览 1提问于2018-10-24得票数 0
回答已采纳
1回答
由于某种原因，在我的Vue应用程序中，当链接页面只改变段塞时，我与路由器有问题。例如
我有以下链接
<router-link :to="{ path: '/tag/tag2' }">Tag 2</router-link>
<router-link :to="{ path: '/tag/tag3' }">Tag 3</router-link>
<router-link :to="{ path: '/category/cat1' }">Cate
浏览 2提问于2018-07-05得票数 0
回答已采纳
1回答
我是vue的新手，我正在做一个获取wordpress REST api的项目。所以我在我的项目中有“post”页面和"Pages“页面，它们中的每一个都有不同的api端点和路由器链接到循环中的每个post/page，带有特定post/page的slug名称。 当我按下" post“页面中的”READ MORE router link“按钮时，它会将我发送到带有post端点的”post“组件。当我按下Pages页面内的READ MORE路由器链接按钮时，它也会将我发送到"Post“组件，但我需要获取" page”组件以从api获取页面数据。 我注意到，如果在in
浏览 23提问于2021-09-30得票数 0
嗨，我想用laravel和vue.js制作搜索引擎，但是我没有结果:这是我的SearchController.php。
namespace Amp\Http\Controllers;
use Amp\User;
use Illuminate\Http\Request;
class SearchController extends Controller
{
/**
* @param Request $request
* @return array
*/
public function search(Request $request)
{
浏览 0提问于2018-04-17得票数 0
回答已采纳
1回答
我使用Vue-CLI2.9.6创建了项目，现在我想使用.env中的API_URL，但它在main.js中不可用。如何在main.js中使用.env中的API_URL？
代码：
import 'bootstrap-vue/dist/bootstrap-vue.css';
import axios from 'axios';
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import
浏览 2提问于2019-07-07得票数 0
我正在尝试构建一个MEVN堆栈身份验证页面，该页面返回当前登录用户的信息。登录后，路由器重定向到Home.vue，同时将username作为支柱传递给Home.vue。
onSubmit方法在Login.vue中的应用
<script>
methods: {
onSubmit (evt) {
evt.preventDefault()
axios.post(`http://localhost:3000/api/auth/login/`, this.login)
.then(response => {
loc
浏览 0提问于2019-12-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
