16 Vue路由结合请求数据实现新闻列表新闻详情数据渲染 Vue基础中的基础+实战

效果图：

新闻列表	新闻详情	目录结构
文章图片	文章图片	文章图片

【16 Vue路由结合请求数据实现新闻列表新闻详情数据渲染】注意点：
1.在index文件中，配置适应手机

2.在assets下面写的通用的css
basic.scss
在main.js中引入
import ‘./assets/css/basic.scss’;
3.使用路由 vue-router
4.请求数据 vue-resource
介绍：
basic.scss全局通用的css,在main.js中引入
index.html是配置html的
main.js是配置文件
App.vue是入口文件
Home.vue是首页文件
News.vue是新闻文件
源代码：
basic.scss:

@charset "utf-8"; body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }html{ font-size: 62.5%; }body { font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif; color: #555; background-color: #F7F7F7; } em, i { font-style: normal; } ul,li{ list-style-type: none; } strong { font-weight: normal; } .clearfix:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; }

index.html:

vuedemo13 - 锐客网 src="https://www.it610.com/dist/build.js">

main.js:

import Vue from 'vue'; import App from './App.vue'; //引入公共的scss注意：创建项目时候必须使用scss import './assets/css/basic.scss'; //请求数据 import VueResource from 'vue-resource'; Vue.use(VueResource); //引入路由 import VueRouter from 'vue-router'; //使用路由 Vue.use(VueRouter); //创建组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import Content from './components/Content.vue'; //配置路由 const routes = [ { path: '/home', component: Home }, { path: '/news', component: News }, { path: '/content/:aid', component: Content },/*动态路由*/ { path: '*', redirect: './home' } ]//实例化VueRouter const router = new VueRouter({ routes//缩写相当于routes: routes })//挂载路由 new Vue({ el: '#app', router, render: h => h(App) })

App.vue:

> export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } } } lang="scss"> .header { height: 4.4rem; background: skyblue; color: #fff; line-height: 4.4rem; text-align: center; a{ color: #fff; padding: 0 2rem; } }

Home.vue:

> export default { data() { return { msg: '这是一个Home组件！' } } } >

News.vue:

> export default { data() { return { msg: '这是一个新闻组件！', list: [] } }, methods:{ requestData() { var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.jsonp(api).then((response) => { //注意用到this要注意this指向 this.list = response.body.result; },(error) => { console.log(error); }) } }, mounted() { this.requestData(); } } lang="scss" scoped> .list{ li{ height: 3.4rem; line-height: 3.4rem; border-bottom: 1px solid #eee; font-size: 1.6rem; a{ color: #666; } } }

Content.vue:

> export default { data() { return { msg: '数据', list: [] } }, mounted() { // console.log(this.$route.params); /*获取动态数值传值*/ var aid = this.$route.params.aid; //调用请求数据的方法 this.requestData(aid); }, methods:{ requestData(aid) { 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]; },(error) => { console.log(error); }) } } } lang="scss"> #content{ line-height: 2; img { max-width: 100%; } }