vue路由传参--------params和query的区别

分手后的思念是犯贱 2021-11-05 03:24 352阅读 0赞

# vue路由传参--------params和query的区别 #

背景：项目中需要跨页面传值，如试题id,遇到了刷新后，传的值消失，所以研究了以下两者的区别

1.params只能用name来引入路由，query用path/name来引入

2.params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。

3.取值用法类似分别是this.$route.params.name和this.$route.query.name。

4.params传值一刷新就没了，query传值刷新还存在

5.query地址栏中有参数信息 eg:http://localhost:8080/\#/spoc-eduManage/classManage/addStudent.html?id=274de6fe001f474b89d4ed89a9a71970

this.$router.push({
    
    path:"/detail",
    
    params:{
    
    name:'nameValue',
    
    code:10011
    
    }
    
    });
    
    this.$router.push({
    
    path:'/xxx'
    
    query:{
    
    id:id
    
    }
    
    })

6.vue-router 利用url传递参数:

我们上面虽然已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

路由文件中这样写:

{
    
    path:'/params/:id',
    
    component:Params
    
    }

这时候我们可以直接利用url传值了跳转:

方式1:<router-link to="/params/198">params</router-link>

方式2:编程式路由:

this.$router.push({
    
    path:'/xxx'
    
    params:{
    
    id:'198'
    
    }
    
    })

接收参数:

<p>新闻ID：\{ \{ $route.params.newsId\}\}</p>

<p>新闻标题：\{ \{ $route.params.newsTitle\}\}</p>

我们已经实现了以url方式进行传值，这在实际开发中经常使用，必须完全了解。我希望你看完视频后或者学完文章后能多练习两边，并在实际项目中充分使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，352人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue---Vue路由传参(动态路由方式、query方式、params方式)

动态路由传参路由配置： { path: '/update/:uid/:name', //uid参数、name参数 name: '

蔚落/ 2022年12月01日 11:58/ 0 赞/ 232 阅读

相关 vue路由传参—params—query

1、Params的方式类似于get请求，传递的数据会在浏览器地址显示 Params路由传参分为三步： 1、绑定参数在你传参的路由绑定参数 ![在这里插

淩亂°似流年/ 2022年11月21日 11:33/ 0 赞/ 322 阅读

相关 Vue Router 的params和query传参的使用和区别（详尽）

首先简单来说明一下 r o u t e r 和 router和 router和route的区别 //$router : 是路由操作对象，只写对象 //$rou

痛定思痛。/ 2022年10月11日 12:15/ 0 赞/ 220 阅读

相关 vue路由query和params的几种传参方式

在项目中需要路由传参，查看了官方文档以及参考了网上其他资料，现总结如下：一/ params传参 1. 占位符:id //声明式 <router-li

迈不过友情╰/ 2022年04月08日 13:18/ 0 赞/ 872 阅读

相关 vue路由传参--------params和query的区别

vue路由传参--------params和query的区别背景：项目中需要跨页面传值，如试题id,遇到了刷新后，传的值消失，所以研究了以下两者的区别 1.param

分手后的思念是犯贱/ 2021年11月05日 03:24/ 0 赞/ 353 阅读

相关 vue-router路由的$router和$route区别,query和params的传参区别

> $router: 路由操作对象，它负责只写对象，比如push方法就是调用它。 > r o u t e : 是读属性的对象，例如要获取 q u

待我称王封你为后i/ 2021年09月19日 21:06/ 0 赞/ 392 阅读

相关 vue传参之params传参query传参

vue编程式导航，在这里我们必须要明白一个知识点，就是params和query传参的用法。 params传参，路径不能使用path，只能使用name，不然取

我就是我/ 2021年09月16日 02:42/ 0 赞/ 637 阅读

相关 Vue Router 的params和query传参的使用和区别

首先简单来说明一下`$router`和`$route`的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象

分手后的思念是犯贱/ 2021年07月27日 02:49/ 0 赞/ 444 阅读

相关 vue-router中 query传参和params传参的使用和区别

1.query传参： 1.query传参路由： var router = new VueRouter({ routes: [

Love The Way You Lie/ 2021年07月27日 01:12/ 0 赞/ 522 阅读

相关 Vue Router 的params和query传参的使用和区别

目录（一）编程式的导航 1，命名路由 2，查询参数（二）声明式的导航 1，字符串 2，命名路由 3，查询参数（三）总结 ----------------

末蓝、/ 2021年07月25日 17:58/ 0 赞/ 624 阅读