由于以下错误(npm 3.10.10,webpack 3.8.1),我无法使用vue routes get。如何解决这个问题
编译失败。
./node_modules/babel loader/lib/node_modules/vue loader/lib/selector.js?type=script
我使用简单的网页包
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import NewQuote from './components/new-quote.vue'
import Quotes from './components/quotes.vue'
Vue.use(VueRouter)
const routes = [
{path: '', component: Quotes},
{path: '/new-quote', component: NewQuote}
]
const router = new VueRouter({
mode:'history',
routes // short for `routes: routes`
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
Quotes.vue
<template>
<div>
<button class="btn btn-primary" v-on:click="onGetQuotes">Get Quotes</button>
<hr>
<app-quote v-for="quote in quotes" v-bind:qt="quote"></app-quote>
</div>
</template>
<script>
import axios from 'axios';
import Quote from './components/quote.vue';
export default {
data(){
return{
quotes:[]
}
},
components:{
'app-quote' : Quote
},
methods:{
onGetQuotes(){
axios.get('http://localhost:8000/api/quotes')
.then(response => {
console.log(response);
})
.catch(e => {
});
}
}
}
</script>
<style>
</style>
Quote.vue
<template>
<div>
<div class="panel panel-default">
<div class="panel-heading">Simple Quotes</div>
<div class="panel-body">
{{ qt.content }}
</div>
<div class="panel-footer">
<div>
<input type="text">
<a href="" v-on:click="onUpdate">Save</a>
<a href="" v-on:click="onCancel">Cancel</a>
</div>
<div>
<a href="" v-on:click="onEdit">Edit</a>
<a href="" v-on:click="onDelete">Delete</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props : ['qt'],
data(){
return{
}
},
methods:{
}
}
</script>
<style>
</style>
new-quote.vue
<template>
<div>
<div class="panel panel-default">
<div class="panel-heading">Simple Quotes</div>
<div class="panel-body">
<form v-on:submit.prevent="createQuote">
<div class="form-group">
<label for="content">Content:</label>
<input type="text" class="form-control" v-model="quoteContent">
</div>
<button type="submit" class="btn btn-default">Create New Quote</button>
</form>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
quoteContent:''
}
},
methods:{
createQuote(){
axios.post('http://localhost:8000/api/quote', {
content: this.quoteContent
})
.then(response => {
console.log(response);
})
.catch(e => {
});
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style>
</style>
它的'。/组件/Quote.vue'带有大写字母Q
我使用了{import Quote from./components/Quote.vue}而不是{import Quote from./Quote.vue}。现在可以了
问题内容: 我对React还是比较陌生,我正在尝试弄清楚如何使React路由器正常工作。我有一个超级简单的测试应用程序,看起来像这样: 当我运行该应用程序时,home组件加载没有任何麻烦,并且当我单击“ Click Me”链接时,URL更改为localhost / about,但是什么也没有发生。如果单击刷新,则会显示“无法获取/关于”。显然我在做错事,但我一直无法弄清楚是什么。我也在使用Webp
问题内容: 我的目标是让http:// mydomain / route1 渲染React组件Component1和http:// mydomain / route2 渲染Component2。因此,我认为编写如下的路由是很自然的: http:// mydomain / route1可以正常工作,但http:// mydomain / route2却呈现Component1。 然后,我阅读了此问题
问题内容: 似乎无法正常工作。通过日期是这样的: 在目标状态上忽略参数 码: 现场示例可以在 这里 找到 谢谢。 问题答案: 您不能在状态之间传递任意参数,您需要将它们定义为定义的一部分。例如 上面的代码将输出定义了contactId属性的对象。如果你去,你会的。 有关更多信息,请参见UI-Router URL路由的文档。
问题内容: 我已经按照教程在我的应用程序中实现了路由 http://docs.angularjs.org/tutorial/step_07 我无法在IE7中使用我的版本,花了一段时间尝试找出我错过/做错的事情后,我注意到该示例不起作用。 http://angular.github.com/angular- phonecat/step-7/app/ 有人知道如何使它工作吗? 问题答案: 好的,我遇到
我刚刚开始学习laravel,我正在使用MAMP。我在这个url上有一个表单:http://localhost:8888/laravel-site/my new app/public/ducks但当我提交表单时,它会将我带到此url:http://localhost:8888/ducks不会停留在我期望的地方。 routes.php文件包含以下内容: 在我的生活中。htaccess文件我有这个:
我正在使用Spring Cloud(hoxton.sr10)和Spring Boot(2.2.6.release) 我在尤里卡服务器8761注册了我的服务 gateway mainClass java