今天完成的事情：
1写了一下小课堂课件，准备明天讲：
导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现
vue中路由守卫一共有三种，一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫
所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。
一、全局路由守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪个页面去？
console.log(from) => // 从哪个页面来？
next() => // 一个回调函数
}
router.afterEach（to，from） = {}
二、组件路由守卫
// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {
// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
// 离开当前路由页面时调用
}
三、路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置的一个守卫
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
2.写了一个页面，这个页面用了两个element组件，其中一个老出问题，改了半天：
<template>
<div class="perComment">
<nav>
<img src="../assets/images/热门推荐/u538.svg" alt />
<p>评价</p>
<p></p>
</nav>
<main>
<p class="inquiry">您对本次课程满意吗?</p>
<div class="course">
<img :src="course.img" alt />
<span>{{course.name}}</span>
<span>{{course.occpation}}</span>
<p>{{course.content}}</p>
</div>
<div class="evaluate">
<el-rate v-model="value" :colors="colors" :texts="texts" show-text></el-rate>
<el-input
class="text"
type="textarea"
placeholder="您的评价会激励我们做的更好"
v-model="textarea"
maxlength="200"
rows="10"
show-word-limit
></el-input>
</div>
</main>
<footer>
<div class="foot">提交评价</div>
</footer>
</div>
</template>
<script>
export default {
name: "perComment",
data() {
return {
colors: { 2: "#99A9BF", 4: "#F7BA2A", 5: "#FF9900" },
texts: ["想骂人~", "加油哦~", "将就吧~", "挺好的~", "太棒啦~"],
course: {
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
name: "文桦",
occpation: "高级数学讲师",
content: "《函数模型及其应用》"
},
value: null,
textarea: ""
};
}
};
</script>
<style lang="scss" scoped>
.perComment {
position: relative;
padding-top: 50px;
nav {
position: fixed;
top: 20px;
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e3e3e3;
img {
padding-left: 10px;
}
}
main {
box-shadow: 0 0 2px 2px #aaa;
width: 95%;
height: 450px;
margin: 0 auto;
padding: 10px 0;
.inquiry {
text-align: center;
font-size: 12px;
font-weight: bold;
color: #555;
}
.course {
width: 80%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 5px;
box-shadow: 1px 1px 2px 2px #e2e2e2;
img {
width: 25px;
height: 25px;
border: 1px solid #000;
border-radius: 50%;
}
p {
font-size: 12px;
}
span {
font-size: 10px;
padding: 0 10px;
}
}
.evaluate {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
.el-rate {
padding: 20px 0;
}
.text {
width: 300px;
border-radius: 5px;
box-shadow: 1px 1px 2px 2px #e2e2e2;
}
}
}
footer {
margin-top: 50px;
width: 100%;
height: 40px;
.foot {
background-color: #aaa;
width: 95%;
height: 25px;
border: 1px solid #aaa;
border-radius: 15px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>>
明天计划：
讲小课堂，继续写前台页面。
返回列表
评论