路由动态接收参数

Posted 2022-06-21 c546170667

上一章我们讲到路由静态的使用，本次我们讲路由动态的传值及获取值。
一、创建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