标签:组件 详情 路由 取值 teacher size router sed OLE
1 emement-ui
-下载:npm install element-ui
-使用:在main.js中配置
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);
2 专题课程表介绍
-course
-courseDetail
-Teacher
-PricePolice
3 vue绑定图片:
<el-carousel-item v-for="img in imgs">
<img :src="img">
</el-carousel-item>
4 vue页面挂载时,执行方法:
mounted:function () {
//init()为methods中定义的方法
this.init()
}
5 课程列表展示
6 课程详情页面
-路由携带参数跳转:
<router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">详情</router-link>
-取值:
course_id: this.$route.params.id,
-图片显示(跟地址绑定) :src=‘图片地址‘ <img :src="course.course_img" class="image">
-路由携带参数跳转:
-<router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">{{course.name}}</router-link> params:取值
-从另一个页面组件取值:
-this.$route.params.id 拿到的就是路由后面的值
-当前页面切换,数据没变 通过watch观察路由的变化
watch:{
‘$route‘:function (to,form) {
console.log(‘to‘,to);
console.log(‘form‘,form);
//修改课程的id
this.course_id=to.params.id;
//再去后台加载数据回来
this.init()
}
}
}
标签:组件 详情 路由 取值 teacher size router sed OLE
原文地址:https://www.cnblogs.com/cao123/p/10173801.html