当前位置:网站首页>路由(二)
路由(二)
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
边栏推荐
- Use of UIC in QT
- Error: eacces: permission denied, access to "/usr/lib/node_modules"
- Origin绘制热重TG和微分热重DTG曲线
- 693. Travel sequencing (map + topology)
- Android kotlin fragment technology point
- Explanation of 34 common terms on the Internet
- 题解:《你的飞碟在这儿》、《哥德巴赫猜想》
- On flow delivery between microservices
- Three talking about exception -- error handling
- [技术发展-22]:网络与通信技术的应用与发展快速概览-2- 通信技术
猜你喜欢
Gee learning notes 2
无主灯设计:如何让智能照明更加「智能」?
Téléchargement par navigateur
Common options of tcpdump command: Three
2022 zero code / low code development white paper [produced by partner cloud] with download
How to explain binary search to my sister? This is really difficult, fan!
A better database client management tool than Navicat
题解:《你的飞碟在这儿》、《哥德巴赫猜想》
错误:EACCES:权限被拒绝,访问“/usr/lib/node_modules”
Origin绘制热重TG和微分热重DTG曲线
随机推荐
Story point vs. Human Sky
Can automatically update the universal weekly report template, you can use it with your hand!
如何设置Qt手工布局
[技术发展-22]:网络与通信技术的应用与发展快速概览-2- 通信技术
uniapp小程序 subPackages分包配置
Common options of tcpdump command: Three
The second anniversary of the three winged bird: the wings are getting richer and the take-off is just around the corner
Will your sleep service dream of the extra bookinfo on the service network
Tupang multi-target tracking! BOT sort: robust correlated multi pedestrian tracking
Selenium element positioning method
你的 Sleep 服务会梦到服务网格外的 bookinfo 吗
ensp简单入门
Android kotlin fragment technology point
Solution: Compression Technology (original version and sequel version)
JS reverse massive creative signature
Everyone believes that the one-stop credit platform makes the credit scenario "useful"
c# 水晶报表打印
Which do you choose between Alibaba P7 with an annual salary of 900000 and deputy department level cadres?
What are eNB, EPC and PGW?
【模板】最长公共子序列 (【DP or 贪心】板子)