标签：方式 mount item npm 创建 route page 静态 vue
上一章我们讲到路由静态的使用，本次我们讲路由动态的传值及获取值。
一、创建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
标签：方式 mount item npm 创建 route page 静态 vue
原文地址：https://www.cnblogs.com/c546170667/p/11324618.html
