VUE动态路由+请求数据演示新闻列表及详情页

依赖：vue-resource   vue-router

准备：在项目目录下安装好上面两个插件

1、在main.js中引入vue-resource   vue-router

import VueResource from 'vue-resource';

import VueRouter from 'vue-router';

2、在main.js中引入将用到的组件

import News from './components/news.vue';

import Content from '.components/content.vue';

3、在main.js中配置路由

const routes = [

{path:'/news/:aid',component:News},

{path:'/content',component:Content},

{path:'*',redirect:News} //默认路由指向

]

4、实例化

const router = new VueRouter({

　　routes;//  缩写routes：routes

});

 

5、在main.js中 挂载路由

new Vue({

　　el:'#app',

　　router,

　　render:h => h(App)

})

6、在App.vue中添加 <router-view></router-view>

7、使用路由

<!--使用路由引入组件-->
<router-link to="/news">新闻</router-link>