vue路由，组件

先是跟着 http://www.openopen.com/lib/view/open1476240930270.html

搭建了环境，中间遇到了一些问题，还好都一一解决了。下面总结一下：

Paste_Image.png

demo演示效果

Paste_Image.png

先写主体App.vue

<template>
  <div id="app">
    ![](./assets/logo.png)
     <router-view></router-view>
    <first></first>
    <second></second>
    <ul>
      <li><router-link to="/first">点我跳转到第一个页面{{name}}</router-link></li>
      <li><router-link to="/second">点我跳转到第二个页面</router-link></li>
    </ul>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="line-height: 36px; color: #20A0FF">豆瓣电影排行榜</h2>
      </div>
      <div v-for="article in articles" class="text item">
        {{article.title}}
      </div>
    </el-card>
  </div>
</template>

<script>
import first from './components/first.vue'
import second from './components/second.vue'
export default {
  data(){
    return {
      name:'app',
      articles:[]
    }
  },
  components:{first,second},
  mounted:function () {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10',
      {},{
        headers:{},emulateJSON:true}).then(function (response) {
      console.log(response.data.subjects)
      this.articles=response.data.subjects
    },function (response) {
      console.log(response)
    })
  }
}
</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>

在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 App from './App'
// import router from './router'
import VueRouter from "vue-router"
import VueResource from 'Vue-resource'
Vue.use(VueRouter);
Vue.use(VueResource);

当然了，这里resource不是必须的。
接着定义组件

//定义组件
const First={template:"<div><h2>我是第一个子页面呀</h2></div>"}
import second from "./components/second.vue"

这里分别有直接创建template方式构建组件，还有import方式引入组件😁
然后创建路由：

//创建一个路由实例
//并配置路由规则
const router=new VueRouter({
  // mode:'history',
  // base:__dirname,
  routes:[
    {
      path:'/first',
      component:First
    },
    {
      path:'/second',
      component:second
    }
  ]
})

path是路径，component放上面声明的组件。搞定！
创建Vue实例

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

npm run dev 运行，结束。