父组件
-
导入
import axios from 'axios'
-
mounted事件
mounted () {
this.getDetailInfo()
} -
axios获得Json文件,然后触发方法
methods: {
getDetailInfo () {
axios.get(‘api/detail.json’)
}
}获得动态路由的参数
2. axios.get(‘api/detail.json?id=’ + this. r o u t e . p a r a m s . i d ) ! [ 在 这 里 插 入 图 片 描 述 ] ( h t t p s : / / i m g − b l o g . c s d n i m g . c n / 20190903194516885. p n g ? x − o s s − p r o c e s s = i m a g e / w a t e r m a r k , t y p e Z m F u Z 3 p o Z W 5 n a G V p d G k , s h a d o w 1 0 , t e x t a H R 0 c H M 6 L y 9 i b G 9 n L m N z Z G 4 u b m V 0 L 0 F k Y V 9 s Y W t l , s i z e 1 6 , c o l o r F F F F F F , t 7 0 ) 3. a x i o s . g e t ( ′ a p i / d e t a i l . j s o n ? i d = ′ + t h i s . route.params.id )![在这里插入图片描述](https://img-blog.csdnimg.cn/20190903194516885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkYV9sYWtl,size_16,color_FFFFFF,t_70) 3. axios.get('api/detail.json?id=' + this. route.params.id)![在这里插入图片描述](https://img−blog.csdnimg.cn/20190903194516885.png?x−oss−process=image/watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkYV9sYWtl,size16,colorFFFFFF,t70)3.axios.get(′api/detail.json?id=′+this.route.params.id) 等价于
-
data初始化
-
子组件属性调用
口诀
一导二m三a法,四data初始五调用
子组件
- props 定义
- 引用
- 绑定直接变量名,插值记得加this
口诀
一定义二引用,绑定名字插值加this
keep-alive做缓存,mounted只会被执行一次。如果每次进页面都想发一个新的ajax请求。
- 配合使用activated 生命周期钩子
- keep-alive 标签处exclude 无需缓存的vue名