Vue基础之路由结合请求数据

思路：

1.主页（App.vue）设置新闻导航，
2.（News.vue）用vue-resource请求数据得到新闻列表，
3.每个新闻列表设置路由进入新闻详情页（Content.vue）

main.js

**main.js**
/*设置vue-resource*/
import VueResource from 'vue-resource';
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
/*1.创建组件*/
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';
/*2.定义路由*/
const routes = [
  { path: '/home', component: Home },
  { path: '/news', component: News },
  { path: '/pcontent', component: Pcontent },
  { path: '/content/:aid', component: Content },
  { path: '*', redirect: '/home' }//默认调转
];
/*3.实例化vueRouter*/
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});



Vue.config.productionTip = false;

/* eslint-disable no-new */
/*4.挂载vueRouter*/
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
});
/*5.放在根组件app.vue里*/

App.vue

News.vue

Content.vue