javascript - 使用vue-router时组件template写上router-view就报错

问题描述

问 题

1，今天更新vue-cli项目就一直跑不起来了，重新init一个新的也是同样的问题

webpack配置文件就是vue-cli生产的

main.js代码如下：

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import Hello from './components/Hello'
Vue.use(VueRouter)
const routers = new VueRouter({
  mode:'history',
  routes:[{path: '/',component: Hello}]
})
new Vue({
  el:'#app',
  routers,
  render: h => h(App)
})

App.vue代码：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Hello.vue代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

npm run dev 后错误信息：

npm run build 后报错：

解决方案

const router = new VueRouter({
  mode:'history',
  routes:[{path: '/',component: Hello}]
})
new Vue({
  el:'#app',
  router,
  render: h => h(App)
})

routers改成router 即可

这篇关于javascript - 使用vue-router时组件template写上router-view就报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！