Vue 路由练习 —— 新闻列表

 运行效果： 

 

 

Vue Router   官方插件

https://router.vuejs.org/zh/

安装 ： cnpm install vue-router  --save

 

axios    第三方插件

https://github.com/axios/axios

安装： cnpm install axios --save

 

 

main.js   配置路由

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

//官方插件的使用
//引入并 Vue.use(VueRouter)
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//1.创建组件
import NewsList from './components/NewsList.vue';
import News from './components/News.vue';

//2.配置路由   注意：名字
const routes = [
  { path: '/newsList', component: NewsList },
  { path: '/news/:id', component: News },
  { path: '*', redirect: '/newsList' }   /*默认跳转路由*/
]

//3.实例化VueRouter  注意：名字
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

//4、挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})


//5.内容显示 <router-view></router-view>

 

App.vue

<router-view></router-view>

<template>
  <div id="app">
    <!--显示内容-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
  text-decoration: none;
}
  
</style>

 

NewsList.vue    列表页

通过 axios 获取数据

<template>
    <div>
       <ul class="list">
          <li v-for="item in list">
            <router-link :to="'/news/'+item.aid">{{item.title}}</router-link>
          </li>
       </ul>
    </div>
</template>

<script>
    //第三方插件的使用
    import Axios from 'axios';
    export default {
        data(){
          return {
            list:[]
          }
        },
        methods:{
          getData(){
            var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
            Axios.get(api).then((response)=>{
              this.list=response.data.result;
              //console.log(response.data.result);
            }).catch((error)=>{
              console.log(error);
            });
          }
        },
        mounted(){
          this.getData();
        }
    }
</script>

<style lang="scss" scoped>
  .list{
    li{
      display: block;
      text-align: left;
      padding: 10px 0;
    }
  }
</style>

 

News.vue 详细页

<template>
    <div class="news">
      <header>
        <router-link to="/newsList/" class="gobackLink"><< 返回列表</router-link>
      </header>

      <h2>{{list.title}}</h2>
      <div class="cont" v-html="list.content"></div>
    </div>
</template>

<script>
    import Axios from 'axios';
    export default {
        data(){
          return {
            list:[]
          }
        },
        methods:{
          getData(id){
            var api='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+id;
            Axios.get(api).then((response)=>{
              console.log(response);
              this.list=response.data.result[0];
              //console.log(response.data.result);
            }).catch((error)=>{
              console.log(error);
            });
          }
        },
        mounted(){
          this.getData(this.$route.params.id);
        }
    }
</script>

<style lang="scss">
  .news{
    padding: 0 15px;
  }

  header{
    text-align: left;

    .gobackLink{
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid #eee;
      border-radius:10px;
    }
  }


  .cont{
    text-align: left;
    line-height: 2em;

    img{
      display: block;
      max-width: 100%;
      height: auto;
    }
  }
</style>

 

scoped  标识 CSS 局部作用域 （有坑！！！）

 

img 没有 data-* 属性，定义 img 的样式不起作用。

 

 

 

参考资料：vue中的css作用域、vue中的scoped坑点