今天,算是真正认识了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这样的格式,路由匹配不上跟页面,所以就避免了上述问题。

vue刷新子页面,跳到主页,params传参引起的血案!的更多相关文章

  1. 利用PHP实现页面跳转同时POST传参,CURL不行

    function payto(){ echo "<form style='display:none;' id='form1' name='form1' method='post' ac ...

  2. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  3. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  4. AngularJS ui-router刷新子页面路由

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...

  5. mui---父页面跳子页面刷新子页面

    最近在做项目,遇到一个问题,从父页面跳转到子页面,不会刷新子页面的问题. 解决方法:可以在跳转的时候,使用openWindow来进行跳转,接下来配置跳转打开页面的参数: 具体如下: mui.openW ...

  6. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  7. Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

    1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB ...

  8. URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

    原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...

  9. vue常用操作及学习笔记(路由跳转及路由传参篇)

    路由跳转 - 超链接方式跳转 html: <div id="app"> <h1>Hello App!</h1> <p> <!- ...

随机推荐

  1. Qt5.8.0编译QtMqtt库并使用该库连接有人云的例子

    一 编译QtMqtt库Qt5.10才官方支持MQTT,但我用的Qt版本是5.8.0 Mingw_32BIT, 为了在Qt5.8.0上添加MQTT支持,需要自己编译源码 步骤: (1) git clon ...

  2. Codeforces 1236E. Alice and the Unfair Game

    传送门 首先可以注意到对于固定的起点 $S$ ,它最终能走到的终点一定是一段区间 这个用反证法容易证明,假设合法区间存在断点,这个点左右都可以作为终点 那么分成区间断点在起点左边和起点右边讨论一下即可 ...

  3. JavaScript设计模式(发布订阅模式)

    发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替代传统的发布—订阅模式 ...

  4. ModbusTCP报文详解【二】

    [1]功能码05H [2]功能码06H [3]功能码0FH [4]功能码10H

  5. Swagger学习(一、入门)

    简单 入门(效果) SwaggerConfig.class @Configuration //变成配置文件 @EnableSwagger2 //开启swagger2 public class Swag ...

  6. Django-DRF-视图的演变(二)

    Django-DRF-视图的演变   版本一(基于类视图APIView类) views.py: APIView是继承的Django View视图的. 1 from .serializers impor ...

  7. spring注解定时器

    上一篇文章写了一个在配置文件中设置时间的定时器,现在来写一个注解方式的定时器: 1.工程结构如下: 2.需要执行的代码块: package com.Task; import org.springfra ...

  8. 从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程

    从零开始实现asp.net MVC4框架网站的用户登录以及权限验证模块 详细教程   用户登录与权限验证是网站不可缺少的一部分功能,asp.net MVC4框架内置了用于实现该功能的类库,只需要简单搭 ...

  9. Java学习笔记【八、数据结构】

    参考资料: http://www.cnblogs.com/janneystory/p/5758958.html array arraylist list linklist的区别 http://www. ...

  10. 原创:(一)TCP/IP学习笔记之概述

    端到端论点和命运共享其实不应该在底层,差错控制应该在应用程序附近来实现.这是因为考虑了连接,而不是传输的准确,因为差错可以根据某些算法(通信中的滤波等)来恢复,不过在大面积网络出现问题的时候有必要进行 ...