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')
    }
  },

推荐阅读更多精彩内容

  • 本文基于工作项目开发,做的整理笔记因工作需要,项目框架由最初的Java/jsp模式,逐渐转移成node/expre...
    SeasonDe阅读 4,236评论 5 32
  • 感赏儿子今天情绪平稳了很多,玩了一天的游戏,很累的睡去。听见他爸爸说去野外,很感兴趣,终于有了一件健康有意...
    金色阳光魏艳春阅读 16评论 0 0
  • 一届届学生教下来,不但没有对自己教学的总结,反倒更添了许多疑惑,眼前学生变化之大完全超出预想,爱学习、善吃苦的孩子...
    疯读阅读 35评论 0 1
  • 华夏五千年文明起始于炎黄,历史的细节虽多不可考,但民族的根源始终坚固。 史记自五帝本纪始,讲述一段模糊而遥远的历史...
    猕猴桃姑娘阅读 48评论 0 0
  • 亲亲相隐的正义感 今天,我不想直接下结论。 先来说一下“父攘子证”的这个人,听闻这件事儿之后你会有什么想法?这个人...
    猫小埋阅读 15评论 0 0