下面我做一个小例子将Vue路由和请求数据结合在一起。
先来看页面呈现的效果:(电脑是需要连网的)
- 点击 “Go to News” 跳转到 新闻列表界面 (api接口已有)
- 点击任意一条新闻 跳转到其新闻详细 (api接口已有)
1.那么接下来,我们先定义一个News组件
News.vue
<template>
<!-- 所有的内容要被根节点包含起来-->
<div id="news">
我是一个新闻组件
<br>
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
<!-- 控制台查看内容的aid-->
<!--<router-link to="/content/aid=123">{{key}}---{{item}}</router-link> 将aid写死 -->
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
msg:'我是一个news组件',
list:[]
}
},
methods:{
requestData(){
//jsonp请求的话,后台api接口要支持jsonp
/**
* 新闻列表接口:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
*/
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.jsonp(api).then((response)=>{
console.log(response);
this.list = response.body.result; //将取得的数据渲染到list当中
//注意:用到this要注意this的指向
},function(err){
console.log(err);
})
}
},
mounted(){
this.requestData(); // 页面刷新时就加载数据
}
}
</script>
2.在main.js 中完成请求数据和导入使用router的等一系列操作
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 VueResource from 'vue-resource';
Vue.use(VueResource)
//导入并使用router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
//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 = [ //若这里是 xxx,那么第25行应是 routers:xxx
{ path: '/home', component: Home },
{ path: '/news', component: News },
{ path: '/content/:aid', component: Content },/* 动态路由*/
{ path: '/pcontent', component: Pcontent },
{ path: '*', redirect: '/home' }//默认跳转路由
]
//3.实例化VueRouter 注意,名字一定不能错
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
//4.挂载路由
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
//5.根组件的模板里放上这句话 <router-view></router-view>
在请求数据前要记得安装vue-resource模块(npm install vue-resource --save ),Vue如何请求数据与Vue的动态路由在我的前几个csdn中都有详细的讲解,可以参考
做到这一步即可看到如下界面:
News.vue 中第9行和第37行的数据均是来自控制台中的名称
3.新定义一个Content.vue 组件 做新闻的详情页面
Content.vue
<template>
<div id="content">
<h2>{{list.title}}</h2>
<div v-html="list.content"></div><!--解析HTML代码-->
</div>
</template>
<script>
export default {
data(){
return{
msg:"数据",
list:[]
}
},
mounted(){
//console.log(this.$route.params);//获取动态路由传值
var aid = this.$route.params.aid;// 动态获取地址的aid
//调用请求数据的方法
this.requestData(aid);
},
methods:{
requestData(aid){
//get请求如果跨域的话 后台php java里面要允许跨域请求
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
this.$http.get(api).then((response)=>{
console.log(response);
this.list = response.body.result[0]//这里为什么有放个0呢 具体看控制台的数据
},(err)=>{
console.log(err)
})
}
}
}
</script>
4.同样在main.js中配置路由
代码为上面的main.js 代码中的第20行和第27行
动态获取每条新闻的aid,运用这个思路即可获取新闻的详情了。
5.最后这是根组件App.vue
App.vue
<template>
<div id="app">
<router-link to="/home">Go to Home</router-link>
<router-link to="/news">Go to News</router-link>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
msg:'你好vue'
}
}
}
</script>
<style>
</style>
具体样式可自行添加,那么Vue的路由跳转与请求数据就是结合在一起了。若有任何疑问或是不解,请在下方评论,谢谢。