路由动态接收参数

上一章我们讲到路由静态的使用，本次我们讲路由动态的传值及获取值。
一、创建content.vue组件，输入以下内容：

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

二、你一定还记得上章我们讲到注册路由，在哪个js注册呢？如果不记得，翻一下上一章我记录的。
替换title2.vue中的代码：

<template>
    <div>
        <br>
        将来的你会感谢现在拼命的你
        <br>
        <ul>
            <li v-for=" (item,key) in list">
               <router-link :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" 这就是动态传值的方式。

综合一下之前的通过resource来获取网站公开的API，前提是该接口允许跨域调用。
一、首先在vscode中打开终端，输入 npm install —save vue-resource 安装该模块。
更改router中的index.js文件

path: '/content/:aid',

重写title2.vue中的代码：

<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>

二、创建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: "数据",
      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>

最后全部保存，在终端输入 npm run dev 运行查看效果吧，当然css我没有处理，不擅长，等vue学完开始学习htm5+css3

路由动态接收参数

猜你喜欢