当前位置:网站首页>路由(二)
路由(二)
2022-07-02 10:25:00 【扣1送地狱火】
一.路由跳转的replace方法
1.作用:控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式:push和replace,其中push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push方式
2.开启replace模式:
<router-link replace ...>News</router-link>
二.编程式路由导航
作用:不借助
<router-link>
实现路由跳转,让路由跳转更加灵活具体编码
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() //可前进也可后退
三.缓存路由组件
作用:让不展示的路由组件保持挂载,不被销毁
//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名,不写表示全部缓存
<router-view></router-view>
</keep-alive>
//缓存多个路由组件
<keep-alive :include="['News','Message']">
<router-view></router-view>
</keep-alive>
四.两个生命周期钩子
activated
和deactivated
是路由组件所独有的两个钩子,用于捕获路由组件的激活状态- 具体使用:
activated
路由组件被激活时触发deactivated
路由组件失活时触发
activated(){
console.log('News组件被激活了')
this.timer = setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
deactivated(){
console.log('News组件失活了')
clearInterval(this.timer)
}
五.路由守卫
5.1全局守卫
//全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权限查看!')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'
})
5.2独享路由守卫
{
name:'zhuye',
path:'/home',
component:Home,
meta:{title:'主页'},
children:[
{
name:'xinwen',
path:'news',
component:News,
meta:{title:'新闻'},
//独享守卫,特定路由切换之后被调用
beforeEnter(to,from,next){
console.log('独享路由守卫',to,from)
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
}
}
}
5.3组件内路由守卫
src/pages/About.vue
:
<template>
<h2>我是About组件的内容</h2>
</template>
<script>
export default {
name:'About',
//通过路由规则,离开该组件时被调用
beforeRouteEnter (to, from, next) {
console.log('About--beforeRouteEnter',to,from)
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对,无权限查看!')
}
},
//通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
console.log('About--beforeRouteLeave',to,from)
next()
}
}
</script>
六、路由器的两种工作模式
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值
hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器
hash模式:
地址中永远带着#号,不美观
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
兼容性较好
history模式:
地址干净,美观
兼容性和hash模式相比略差
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
connect-history-api-fallback
nginx
边栏推荐
- 题解:《你的飞碟在这儿》、《哥德巴赫猜想》
- The second anniversary of the three winged bird: the wings are getting richer and the take-off is just around the corner
- Everyone believes that the one-stop credit platform makes the credit scenario "useful"
- SystemServer进程
- How to modify the error of easydss on demand service sharing time?
- Fundamentals of machine learning (II) -- division of training set and test set
- Partner cloud form strong upgrade! Pro version, more extraordinary!
- Error function ERF
- When tidb meets Flink: tidb efficiently enters the lake "new play" | tilaker team interview
- Engineers who can't read device manuals are not good cooks
猜你喜欢
Find love for speed in F1 delta time Grand Prix
leetcode621. task scheduler
题解:《压缩技术》(原版、续集版)
Halcon extract orange (Orange)
selenium 元素定位方法
Common options of tcpdump command: Three
Tupang multi-target tracking! BOT sort: robust correlated multi pedestrian tracking
[document tree, setting] font becomes smaller
What are eNB, EPC and PGW?
Qt-制作一个简单的计算器-实现四则运算
随机推荐
量子三体问题: Landau Fall
Student course selection information management system based on ssm+jsp framework [source code + database]
P1908 逆序对
题解:《你的飞碟在这儿》、《哥德巴赫猜想》
Pointer from entry to advanced (1)
无主灯设计:如何让智能照明更加「智能」?
P1347 sorting (topology + SPFA judgment ring or topology [inner judgment ring])
Everyone believes that the one-stop credit platform makes the credit scenario "useful"
OpenFOAM:lduMatrix&lduAddressing
2022 zero code / low code development white paper [produced by partner cloud] with download
P1347 排序(拓扑 + spfa判断环 or 拓扑[内判断环])
Download files and preview pictures
Sum of the first n terms of Fibonacci (fast power of matrix)
Node.js通过ODBC访问PostgreSQL数据库
故事點 vs. 人天
Selenium installing selenium in pycharm
Android kotlin fragment technology point
693. Travel sequencing (map + topology)
MySQL45讲——学习极客时间MySQL实战45讲笔记—— 05 | 深入浅出索引(下)
I did it with two lines of code. As a result, my sister had a more ingenious way