学做网站要多久,小程序开发流程步骤,酒店网站源码,网站建设实训 课程标准一、router-link的replace属性
1、作用#xff1a;控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式#xff1a;分别为push和replace#xff0c;push是追加历史记录#xff0c;replace是替换当前记录。路由跳转时候默认为push 3、如何开启repla…一、router-link的replace属性
1、作用控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push 3、如何开启replace模式router-link replace .......News/router-link 加一个replace即可
理解 如果你用的是默认的push你点击进入到下一个路由的时候可以返回到上一个路由 如果你用的是replace你点击进入到下一个路由的时候浏览器左上角不会有返回上一步 二、编程式路由导航
1.作用
不借助router-link 实现路由跳转让路由跳转更加灵活主要是用$router的两个api pushreplace,来实现路由跳转push是默认带缓存replace是覆盖缓存 2.用法
//$router的两个API
this.$router.push({name:xiangqing,params:{id:xxx,title:xxx}
})this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx}
})
// 点了以后浏览器的前进后退操作
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退5前进5步-3后退3步3.案例 三、 缓存路由组件
1.作用
让不展示的路由组件保持挂载不被销毁比如切换时要保留表单数据。
2.用法
在放router-view标签的地方包边包一个keep-alive/keep-alive不加include默认这里边的组件都保持挂载加include后边跟要挂载的组件名字。
// 缓存一个用字符串
keep-alive includeNews router-view/router-view
/keep-alive// 缓存多个路由组件用 数组 (使用 v-bind)
keep-alive :include[News, Message]router-view/router-view
/keep-alive注意缓存的名字是组件名在需要被缓存组件的外侧包裹keep-alive不要去被缓存组件的template里边包比如要缓存news组件就要去Home显示区里面包keep-alive而不是news里面。
四、路由组件独有的两个生命周期钩子
1.作用
路由组件所独有的两个钩子用于捕获路由组件的激活状态。
2.名字
1activated 路由组件被激活时触发。2deactivated 路由组件失活时触发。
3这里提一嘴除了这些钩子还有个钩子是nextTick是在页面挂载完且数据放到页面上后执行的钩子
3.案例
还记得之前做的那个字体闪烁案例吗在这里再搞一遍搞在News组件里循环变化透明度但是你想离开这个选项卡时让定时器停就要走销毁流程但是News里面的input输入框数据要保留又不能被销毁。
上面这种情况就很尴尬了如果想要实现组件出现时开启定时器组件切换时关闭定时器且保留数据就要使用两个新的生命周期钩子是路由组件独有的钩子
templateulli :style{opacity}/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescript
export default {name: News,data () {return {opacity:1}},activated () {console.log(news组件激活了);this.timer setInterval(() {this.opacity - 0.01if (this.opacity 0) this.opacity 1}, 16)},deactivated () {console.log(news组件失活了);clearInterval(this.timer)}// beforeDestroy() {// console.log(news即将被销毁了);// clearInterval(this.timer)// },// mounted() {// this.timer setInterval(() { // this.opacity - 0.01// if (this.opacity 0) this.opacity 1 // }, 16)// },
}
/script
五、路由守卫
1.作用与分类
作用对路由进行权限控制(我想让你看哪个不想让你看哪个) 分类全局守卫、独享守卫、组件内守卫
2.全局前置路由守卫
1作用
全局前置守卫初始化时执行、每次路由切换前执行。
2用法
使用下面的api有三个参数分别是to到哪里去from从哪里来next下一步放行
router.beforeEach((to,from,next){ })3案例
比如我要设置只有本地存储中school为atguigu的可以查看新闻和消息那就要在前置路由守卫中设置如果符合条件才能放行。 index.js
// 全局前置路由守卫 ,初始化时或每一次路由切换之前都会调用一个函数
router.beforeEach((to, from, next) {console.log(前置路由守卫,to,from);//to是往哪去的对象from的从哪来的对象都包括name和path// if(to.namexinwen || to.namexiaoxi) 如果用name写法上面就要配置好name// if(to.path /home/news || to.path /home/message){if(to.meta.isAuth){//判断是否需要鉴权在每个路由里面配置metaif(localStorage.getItem(school)atguigu){next()//放行}else{alert(学校不对无权查看)}}else{next()}}), 3.全局后置路由守卫 1作用
全局后置守卫初始化时执行、每次路由切换后执行
2用法
使用下面的api有两个参数分别是to到哪里去from从哪里来
router.afterEach((to,from){ })3案例
比如我要设置不同的模块显示不同的网页title标题那么就要在等进入该模块成功后再设置也就是要搞在全局后置守卫中会更简单。
// 全局后置路由守卫,初始化时或每一次路由切换之后都会调用一个函数
router.afterEach( (to,from) {console.log(后置路由守卫,to,from);document.titleto.meta.title || 椰果
})
4.独享路由守卫
1作用
独享路由守卫某一个路由单独享用的守卫
2用法
router.beforeEnter((to,from,next){ })注意独享路由只有beforeEnter没有afterEnter但可以配合全局后置守卫使用
3使用 比如只需要news鉴权 name:xinwen,path:news,component:News,meta: { isAuth:true,title:新闻 },beforeEnter:(to,from, next){console.log(独有路由守卫,to,from)if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}} 5.组件内路由守卫
1作用
在组件内写这个 组件内守卫该组件独有的路由守卫
2用法
1进入组件时 beforeRouteEnter(to, from, next) {}必须通过路由规则进入你得点啊写组件标签进入不行而且是进入路由组件时调用相当于前置路由守卫to为当前组件
2离开组件时 beforeRouteLeave(to, from, next) {}你得触发路径的变化前端浏览器监测到了才允许你离开时离开组件时调用这个函数在后置路由守卫之后
3使用
about.vue
// 组件内路由守卫beforeRouteEnter(to, from, next){console.log(组件内进入路由守卫,to,from)if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},beforeRouteLeave(to, from, next) {console.log(组件内离开路由守卫, to, from)next()}
}
六、路由器的两种工作模式
1.对于一个url来说什么是hash值——#及其后面的内容就是hash值。
2. hash值不会包含在HTTP请求中即hash值不会带给服务器。
3.hash模式
1.地址中永远带着#号不美观。2.若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。3.兼容性较好。
4.history模式
1.地址干净美观。2.兼容性和hash模式相比略差。3.应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。
可以这样更改模式;
// mode:history,mode:hash,//默认hash,hash会有#/不会发请求给服务器而history会vue2就结束啦接下来学习vue3然后会做两个关于vue3的项目。加油
