Vue路由不起作用
问题描述:
我不能使用vue路由get的以下错误(npm 3.10.10,webpack 3.8.1)。如何解决这个Vue路由不起作用
Failed to compile.
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue Module not found: Error: Can't resolve './components/quote.vue' in 'D:\vue\vue-laravel\src\components' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue 11:0-43 @ ./src/components/quotes.vue @ ./src/main.js @ multi (webpack)-dev-server/client? http://localhost:8080 webpack/hot/dev-server ./src/main.js
我使用的WebPack-简单
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>
新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>
答
我用从{从” ./components/quote.vue进口报价}而不是{进口报价'./quote.vue}。现在工作正常
只是为了记录︰失踪的事quote.vue是**不**你的代码? – GhostCat
'Module not found:Error:Can not resolve'./components/quote.vue'in'D:\ vue \ vue-laravel \ src \ components'' - 你确定你的'quote.vue'存在于' SRC/components'? – h2ooooooo
哦,这是一个耻辱。我使用{从'./components/quote.vue}导入报价,而不是从'./quote.vue}导入报价。现在工作正常,但在控制台 – Ja22