Vue路由不起作用

Posted 2023-02-22

【中文标题】Vue路由不起作用

【英文标题】：Vue routes doesn't work

【发布时间】：2018-03-31 06:13:29

【问题描述】：

我不能使用 vue 路由得到以下错误（npm 3.10.10，webpack 3.8.1）。如何解决这个问题

编译失败。

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue 找不到模块：错误：无法解析“./components/quote.vue” '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-simple

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 不是你的代码？

Module not found: Error: Can't resolve './components/quote.vue' in 'D:\vue\vue-laravel\src\components' - 你确定你的quote.vue 存在于src/components 中吗？

哦，真可惜。我使用了 import Quote from './components/quote.vue 而不是 import Quote from './quote.vue 。现在工作正常，但在控制台中显示以下错误

client?cd17:147 ./node_modules/vue-loader/lib/template-compiler?"id":"data-v-4782daac","hasScoped":false,"buble": "transforms":!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/components/quotes.vue（发出值而不是错误实例）：用 v-for 渲染的组件列表应该有明确的键。有关更多信息，请参阅vuejs.org/guide/list.html#key。 @ ./src/components/quotes.vue 10:0-257 @ ./src/main.js @multi (webpack)-dev-server/client?localhost:8080 webpack/hot/dev-server ./src/main .js

您可以先尝试将您的 npm 更新到最新版本吗？这现在已经严重过时了。

【参考方案1】：

我使用了 import Quote from './components/quote.vue 而不是 import Quote from './quote.vue 。现在工作正常

【参考方案2】：

它的 './components/Quote.vue' 带有大写的 Q