vue.js - vue-cli 项目使用vue-router的问题

问题描述

问 题

问题是：<router-view></router-view>中不渲染匹配到的component！

先贴一下package.json:

{
  "name": "vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "GeorgeKing <[e-mail]>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.1.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

main.js代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Index from './components/Index.vue'
import Login from './components/Login.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  routers: [
    {
      path: 'login',
      component: Login
    },
    {
      path: '/',
      component: Index
    }
  ]
})

const app = new Vue({
  router,
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>
      <router-link to="/login">Login</router-link>
      <router-link to="/">Index</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  data(){
      return {

      }
  },
  methods: {
  },
  components: {
  }
}
</script>

<style scoped>
#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>

Index.vue代码如下：

<template>
  <div class="index">
    <h1>Hello</h1>
  </div>
</template>
<style>
</style>
<script>
    export default{
        data(){
            return {}
        },
        components: {

        }
    }
</script>

yarn run dev 以后无法显示Index.vue template中的内容:

解决方案

const router=new VueRouter({
    routes:[{
        path:'/',component:Index
    }]
})

是routes不是routers

这篇关于vue.js - vue-cli 项目使用vue-router的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！