Vue路由结合请求数据

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 安装vue-resource， vue-router

cnpm install vue-resource --save
cnpm install vue-router --save

五 修改代码

├── src
│ ├── App.vue
│ ├── components
│ │ ├── Content.vue
│ │ ├── Home.vue
│ │ └── News.vue
│ ├── main.js

App.vue

Content.vue

Home.vue

News.vue

main.js

import Vue from 'vue'
import App from './App.vue'

import './assets/css/basic.scss'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import VueResource from 'vue-resource'
Vue.use(VueResource)

import Home from './components/Home.vue'
import News from './components/News.vue'
import Content from './components/Content.vue'
import Pcontent from './components/Pcontent.vue'

const routes = [
  {path:'/home', component:Home},
  {path:'/news', component:News},
  {path:'/content/:aid', component:Content},
  {path:'/pcontent', component:Pcontent},

  {path:'*', redirect:''}
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

六 运行

npm run dev

image.png

image.png

image.png

七 总结

温习知识点
1 vue-resource的jsonp使用

var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid
        
            this.$http.get(api).then((response)=>{
                console.log(response.body.result[0])
            },(err)=>{
                console.log(err)
            })

2 vue-resource的get使用

var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid        
            this.$http.get(api).then((response)=>{
                console.log(response.body.result[0])
            },(err)=>{
                console.log(err)
            })

3 动态路由
{{k}} -- {{item}}

八 参考

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
https://router.vuejs.org/zh/api/#to