Dynamic routing reception parameters

The last chapter we talked about the use of static routing, this time we are talking about traditional values and get the value of dynamic routing.
First, create content.vue components, enter the following:

<template>
  <div id="content">{{msg}}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "数据"
    };
  },mounted(){
     console.log(this.$route.params);
  }
};
</script>

Second, you must also remember that the last chapter we talked about the registered route, which js registered in it? If you do not remember, a brief look at the last chapter of my record.
Replacement code title2.vue of:

<Template> 
    <div> 
        <br> 
        your future will thank you now desperately
         <br> 
        <ul> 
            <li V- for = " (Item, Key) in List " > 
               <-Link Router: to = " '/ Content / '+ Key " > {{Item}} </ Router-Link> 
                </ Li> 
        </ UL> 
    </ div> 
</ Template> 
<Script> 
Export default { 
    Data () { 
        return { 
            MSG: ' zizujian ' , 
            List:["aa"," CCCC " , " BBB " ] 
        } 
    } 
}
 </ Script> 
 *: to = " '/ Content /' + Key " which is dynamically passed by value.

Comprehensive look at the site before the public API to get through the resource, provided that the interface allows cross-domain calls.
A first opened vscode terminal, the input npm install -save vue-resource install the module.
Change the file router in index.js

path: '/content/:aid',

Rewrite the code title2.vue in:

<template>
  <div>
    <br />将来的你会感谢现在拼命的你
    <br />
    <ul>
      <li v-for=" (item,key) in list">
        <router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "zizujian",
      list: []
    };
  },
  methods: {
    requestData() {
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      this.$http.get(api).then(Response => {
        //console.log(Response.body.result);
        this.list = Response.body.result;
      });
    }
  },
  mounted() {
    this.requestData();
  }
};
</script>

Second, create content.vue

<template>
  <div id="content">
    {{msg}}
    <hr />
    <ul>
      <li v-for="item in list">
        {{item.title}}
        <p v-html="item.content"></p>
      </li>
    </ul>
  </div>
</template>
<script>
import { METHODS } from "http";
export default {
  data() {
    return {
      msg:,"Data"
      list: []
    };
  },
  methods: {
    getData(aid) {
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid;
      this.$http.get(api).then(response => {
        this.list = response.body.result;
      }),
        err => {};
    }
  },
  mounted() {
    this.getData(this.$route.params.aid);
  }
};
</script>

Finally save all input npm run dev run to see the effect of it in the end, of course, I did not deal with css, not good at, such as completion of vue start learning htm5 + css3