Vue中配置路由vue-router

1、构建路由页面组件

在src/components/下 创建 项目所需的页面 暂时不写什么内容
比如 home.vue

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      msg: 'Home'
    }
  }
}
</script>

2、建立Vue-Router路由配置

在src/router/index.js 中

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import NotFound from '@/views/NotFound'
Vue.use(VueRouter)
const routes = [{
  path: '/home',
  name: 'Home',
  component: Home
},
{
  path: '/',
  redirect: '/home'
},
{
  path: '*',
  component: NotFound
}]
export default routes

在src/main.js 中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

3、配置入口（默认生成，已配置好）

根目录 app.vue

<template>
  <div id="app">
    <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>

npm run dev

4、遇到的问题

错误信息：

 ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  
Mixed spaces and tabs                             
  /Users/derek/Documents/myProject/vue/firstVue/src/App.vue:13:2
          message: 'Hello Vue!'
       ^
  ✘  http://eslint.org/docs/rules/no-tabs                   
Unexpected tab character                          
  /Users/derek/Documents/myProject/vue/firstVue/src/App.vue:14:2
        }

错误原因：因为你设置了eslint，安装时Use ESLint to lint your code? (Y/n)
如果你想有良好的规范，其实错误已经很清晰，大多数就是缩进不规范，分号不需要等原因，很容易解决的。写多了就成习惯了。

解决方案：找到build/webpack.base.conf.js

删掉下面代码:

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
      formatter: require('eslint-friendly-formatter')
    }
  },