• vue刷新子页面,跳到主页,params传参引起的血案!


    今天,算是真正认识了params传参,为什么说params传参引起了血案?

    起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议,

    于是后端推荐我用params传参的方式来实现这一设计,于是我毫不犹豫的在longin的路由上加上了params参数:

    path: "/:order",
          name: "index",
          component: () =>
            import(/* webpackChunkName: "about" */ "./pages/index.vue"),

    注意,我在path上加上了params参数

    http://localhost:8090/bb

    我这样访问了页面,这个bb是我随便写的参数,对应的是order

    然后我在这一页跳到了另一个页面

    http://localhost:8090/com2

    该页面路由配置如下:

            {
                path:'/com2',
                name:'com2',
                component:()=>
                  import('./components/com1.vue')
              },    

    然后我在这页面上随意的刷新了一下!!!!

    结果跳到了刚才那个页面,也许很多大佬已经发现了问题所在,但是我却蒙了。。。

    我一直把params当成了一种路由传参的方式,其实就是传参,但是它还有一个作用就是动态路由。。

    this.$router.push({name:"com2"})

    上面的方式虽然可以跳到一个新的页面,但是在我刷新的时候,注意url路径是这样的

    http://localhost:8090/com2

    我却回到了和http://localhost:8090/bb一样的页面,

    原因是router将com2当成了/路径的params参数,所以回到了和http://localhost:8090/bb一样的页面,

    大佬们称这种为动态路由,我却一下子没转过弯,整了半天。

    哪种不能其它页面都不能刷新了吧,

    于是我在默认路径上加上了第二个params参数

    path: "/:order/:lang",

    这样,我在http://localhost:8090/com2页面刷新时就不会跳到跟页面了,原因是,我想跳到跟页面必须是/aa/bb这样的格式,路由匹配不上跟页面,所以就避免了上述问题。

  • 相关阅读:
    nginx实现请求的负载均衡 + Keep Alive实现nginx的高可用
    理解什么是JWT(Json web token)及Python实现
    TCP/UDP协议到底是什么
    Redis实现分布式单点登录
    Python面试题---给定一个字符串 {xxx[xxx{xxx}]xx{x[xxx]xxx{xxx}xx}x} 判断其中的 {}[]() 是否成对出现
    Typora里面如何快捷改变字体颜色?
    基于Docker安装关系型数据库PostgrelSQL替代Mysql
    PEP8-Python编码规范
    欢迎来到我的友链小屋
    windows下lib和dll区别
  • 原文地址:https://www.cnblogs.com/fqh123/p/10952521.html
Copyright © 2020-2023  润新知