У меня есть HTML и ссылки на vue и vue-router
Теперь, если я хочу использовать axios, я могу получить возвращаемые данные, вызвав путь напрямую.
Но я надеюсь, что смогу настроить файлы для централизованного управления apiUrl и apiName и импортировать их.
index.html
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module" src="/api/server.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/contact">Go to contact</router-link>
</p>
<p>
<router-link to="/about">Go to about</router-link>
</p>
<p>
<router-view></router-view>
</p>
</div>
<head>
<script>
const contact = httpVueLoader('./view/contact.vue')
const about = httpVueLoader('./view/about.vue')
const routes = [
{ path: '/contact', component: contact },
{ path: '/about', component: about }
]
const router = new VueRouter({
routes
})
var app = new Vue({
router,
}).$mount('#app')
</script>
</head>
</body>
</html>contact.vue
<template>
<p>{{ hello }}</p>
</template>
<script>
module.exports = {
data: function () {
return {
hello: "contact",
};
},
mounted() {
axios
.get('apiUrl/apiName')
.then(response => (console.log(response.data))
.catch(function (error) {
console.log(error);
});
},
};
</script>
<style>
</style>В настоящее время данные могут быть получены по прямо определенным путям. Я не использую Node.js. Можно ли модульизировать apiUrl?
