zoukankan      html  css  js  c++  java
  • 解决vue多个路由共用一个页面的问题

    在日常的vue开发中我们可能会遇见多个路由需要共用一个页面的需求,特别是当路由是通过动态添加的,不同的路由展示的东西只是数据不同其他没有变化。例如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    let routes = [
      {path:"/zhanshan",
      components:Person,
      },
      {path:"/lisi",
      components:Person,
      },
      {path:"/wangwu",
      components:Person,
      }
    ]

    这种情况的时候,我们发现,其实我们的页面在第一次加载成功后就不会再加载了。所以页面一直显示第一次加载的数据,给人的赶脚好像路由没有生效,而我们通过观察浏览器地址栏中的变化可以确定的是这和路由没关系,这对刚刚开始使用的vue的同学可能会产生一点点困扰,其实这和页面的声明周期是相关的,这种情况出现的原因是因为页面在加载后他的大多数钩子函数(mounted,computed…)就不会再次出发了,所以导致页面感觉没有跳转。

    一道这种业务需求其实也比较好处理,其实我们不需要页面切换,我们只需要页面中的数据发生改变就好了,我们可以在页面中监听路由地址的变化,当地址变化的时候,我们就重新加载数据。

    1
    2
    3
    4
    5
    6
    7
    watch:{
     "$route":function(to,from){
       //from 对象中包含当前地址
       //to 对象中包含目标地址
       //其实还有一个next参数的,这个参数是控制路由是否跳转的,如果没写,可以不用写next()来代表允许路由跳转,如果写了就必须写next(),否则路由是不会生效的。
     }
    }

    每当路由发生变化的时候上面的函数都会被触发,我们可以在这个函数中对页面的数据进行重新加载的操作。如果页面结构变化很大,还是建议单独新建一个不同的页面。

  • 相关阅读:
    Change the default MySQL data directory with SELinux enabled
    CentOS7使用firewalld打开关闭防火墙与端口
    常用screen参数
    Android手机上浏览器不支持带端口号wss解决方案
    How to Create Triggers in MySQL
    QT GUI @创建新的工程
    Linux内核源代码的结构(转)
    ARM体系的7种工作模式
    C语言中强制数据类型转换(转)
    Linux驱动设计—— 中断与时钟@request_irq参数详解
  • 原文地址:https://www.cnblogs.com/bootdo/p/11640844.html
Copyright © 2011-2022 走看看