• 路由(二)


    一.路由跳转的replace方法

    1.作用:控制路由跳转时操作浏览器历史记录的模式

    浏览器的历史记录有两种写入方式:push和replace,其中push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push方式


    2.开启replace模式:

    <router-link replace ...>News</router-link>

    二.编程式路由导航

    1. 作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活

    2. 具体编码

      1. this.$router.push({
      2. name:'xiangqing',
      3. params:{
      4. id:xxx,
      5. title:xxx
      6. }
      7. })
      8. this.$router.replace({
      9. name:'xiangqing',
      10. params:{
      11. id:xxx,
      12. title:xxx
      13. }
      14. })
      15. this.$router.forward() //前进
      16. this.$router.back() //后退
      17. this.$router.go() //可前进也可后退

    三.缓存路由组件

    1. 作用:让不展示的路由组件保持挂载,不被销毁

    1. //缓存一个路由组件
    2. <keep-alive include="News"> //include中写想要缓存的组件名,不写表示全部缓存
    3. <router-view></router-view>
    4. </keep-alive>
    5. //缓存多个路由组件
    6. <keep-alive :include="['News','Message']">
    7. <router-view></router-view>
    8. </keep-alive>

    四.两个生命周期钩子

    1. activateddeactivated是路由组件所独有的两个钩子,用于捕获路由组件的激活状态
    2. 具体使用:
      1. activated路由组件被激活时触发
      2. deactivated路由组件失活时触发
    1. activated(){
    2. console.log('News组件被激活了')
    3. this.timer = setInterval(() => {
    4. this.opacity -= 0.01
    5. if(this.opacity <= 0) this.opacity = 1
    6. },16)
    7. },
    8. deactivated(){
    9. console.log('News组件失活了')
    10. clearInterval(this.timer)
    11. }

    五.路由守卫

    5.1全局守卫

    1. //全局前置路由守卫————初始化的时候、每次路由切换之前被调用
    2. router.beforeEach((to,from,next) => {
    3. console.log('前置路由守卫',to,from)
    4. if(to.meta.isAuth){
    5. if(localStorage.getItem('school')==='atguigu'){
    6. next()
    7. }else{
    8. alert('学校名不对,无权限查看!')
    9. }
    10. }else{
    11. next()
    12. }
    13. })
    14. //全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
    15. router.afterEach((to,from)=>{
    16. console.log('后置路由守卫',to,from)
    17. document.title = to.meta.title || '硅谷系统'
    18. })

    5.2独享路由守卫

    1. {
    2. name:'zhuye',
    3. path:'/home',
    4. component:Home,
    5. meta:{title:'主页'},
    6. children:[
    7. {
    8. name:'xinwen',
    9. path:'news',
    10. component:News,
    11. meta:{title:'新闻'},
    12. //独享守卫,特定路由切换之后被调用
    13. beforeEnter(to,from,next){
    14. console.log('独享路由守卫',to,from)
    15. if(localStorage.getItem('school') === 'atguigu'){
    16. next()
    17. }else{
    18. alert('暂无权限查看')
    19. }
    20. }
    21. }

    5.3组件内路由守卫

    src/pages/About.vue:

    1. <template>
    2. <h2>我是About组件的内容</h2>
    3. </template>
    4. <script>
    5. export default {
    6. name:'About',
    7. //通过路由规则,离开该组件时被调用
    8. beforeRouteEnter (to, from, next) {
    9. console.log('About--beforeRouteEnter',to,from)
    10. if(localStorage.getItem('school')==='atguigu'){
    11. next()
    12. }else{
    13. alert('学校名不对,无权限查看!')
    14. }
    15. },
    16. //通过路由规则,离开该组件时被调用
    17. beforeRouteLeave (to, from, next) {
    18. console.log('About--beforeRouteLeave',to,from)
    19. next()
    20. }
    21. }
    22. </script>

    六、路由器的两种工作模式

    对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值

    hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器

    hash模式:

    地址中永远带着#号,不美观
    若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
    兼容性较好
    history模式:

    地址干净,美观
    兼容性和hash模式相比略差
    应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题

    connect-history-api-fallback

    nginx

  • 相关阅读:
    喜马拉雅项目调整
    集群搭建(1)
    学习java技术能干什么工作
    数据驱动!精细化运营!用机器学习做客户生命周期与价值预估!⛵
    如何快速开发一个健康助手,实时守护用户健康
    同态加密:以CKKS为例的Bootstrapping操作介绍(不定期更新)
    Django自定义视图类及实现请求参数和返回参数加解密
    GitHub
    【Mysql学习笔记】- 2 多表查询
    展会预热 | 建模助手亮相住博会,亮点抢先看
  • 原文地址:https://blog.csdn.net/qq_60587956/article/details/125526577