参考地址：https://blog.csdn.net/bluefish_flying/article/details/81011230

router.js中

路由设置这里，

当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。（params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。）

使用query方法，就没有这种限制，直接在跳转里面用就可以。

所以，解决标题中问题的办法两种：

1，用query传参

2.用params传参，并在router.js路由里添加型如/router1/:id的设置

vue params和query传参区别的更多相关文章

  1. Vue Router的params和query传参的使用和区别

    vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...

  2. params 和 query 传参的区别

    很多人都知道params 和  query  都可以在页面跳转的时候传递参数. query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数 ...

  3. （转）vue router 如何使用params query传参，以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  4. vue router 如何使用params query传参，以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. react router @4 和 vue路由 详解(六)vue怎么通过路由传参？

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  6. Vue配置路由和传参方式及路由守卫！

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  7. vue:解决使用param传参后，再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  8. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  9. 前台VUE的组件之间传参方式

    路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...

随机推荐

  1. MFC+OpenGL基础绘制<转>

    转载地址:https://blog.csdn.net/u013232740/article/details/47904115 ------------------------------------- ...

  2. 16_虚拟dom和dom diff算法

    虚拟dom的作用:是为了减少操作真实的dom 初始化显示界面的过程: 1.创建虚拟dom树——>真实dom树——>绘制页面显示 更新界面的过程: 2.绘制页面显示——>setStat ...

  3. Service的启动，绑定，绑定后通信，跨应用绑定，跨应用绑定后通信

    Service介绍: 与Acitivity平级的Android四大组件之一,对比Activity而言,就是没有交互界面,且可以一直在后台执行,只用于处理下载,I/O等长时间信息交流的任务. Servi ...

  4. HTML Tables

    Great job! In this lesson, you learned how to create a table, add data to it, and section the table ...

  5. Linux：简单的并发服务器实现

    我前两天实现了一个简单的服务器和一个对应的客户端,也简单的解决了一些错误检查和常用的函数的封装,但是那个服务器的一次只能连接一个客户端,鸡肋,太鸡肋了,今天我来实现可以连接多个客户端的服务器实例:多进 ...

  6. Matplotlib中文乱码问题

    一.找到并修改matplotlibrc文件 进入Python安装目录下的Lib\site-packages\matplotlib\mpl-data目录,用记事本打开matplotlibrc文件:找到f ...

  7. unity 解决ScrollRect嵌套滚动问题

    在子级有ScrollRect组件的对象添加以下脚本: using UnityEngine; using System.Collections; using UnityEngine.UI; using ...

  8. js 改变颜色值

    /** * 获取颜色值 */ const color2RGB = (color) => { if (typeof color !== 'string' || (color.length !== ...

  9. avalon2学习教程01

    经过难苦奋战,avalon2终于面世了.这花了大半年时间,其中1.6还胎死腹中.长达半年没有产出,我都担心自己会被裁掉…… avalon2许多API与1.4.×保持一致,当然也添加了一些1.5的功能, ...

  10. Ajax与select标签的组合运用

    ---------------------------------------------------------------------------------------------------- ...