vue路由，组件

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

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

Paste_Image.png

demo演示效果

Paste_Image.png

先写主体App.vue

在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:"
我是第一个子页面呀
"}
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: '',
  components: { App},
})

npm run dev 运行，结束。