vue-router params与query使用及区别

最新推荐文章于 2024-06-04 17:34:05 发布
最新推荐文章于 2024-06-04 17:34:05 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： vue.js 文章标签： vue-router query与params vue params
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuliuliuliumin123/article/details/119720314
版权

前置知识

url的语法

大多数的url都是由9个部分组成

<scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag>
  • scheme方案名称即协议名称,表示用哪种协议访问服务器，如http、https
  • user用户：某些方案访问资源时需要的用户名，有些服务器要求输入用户名密码才会允许用户访问数据，如ftp
  • password密码
  • host服务器主机标明资源所在服务器，可以用ip也可以用域名，如果不需要提供user和password,则@省略
  • port端口表示服务器正在监听的网络端口，即应用部署占用的端口号，默认80
  • path路径：表明资源所在服务器路径如/seas/index.html
  • params参数
  • query查询字符串：可以通过地址栏的查询参数来缩小查询范围，用？来与前面做区分，采用key=value的方式，如果有多组查询参数中间用&区分如xx?name=‘san’&age=‘18’
  • frag片段：有些资源我们可以定位到具体的章节或片段，http服务器通常只处理整个对象，而不是对象的片段，所以这个片段更多的是浏览器在做，浏览器从服务器获取整个资源之后，会根据片段来显示感兴趣的内容，也就是我们之前说的锚点。
vue-router基本知识
最低0.47元/天 解锁文章
黑山老妖橙
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析vue-router中params和query的区别
10-15
在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...
vue升级之路之vue-router的使用教程
10-18
在本文中，我们将深入探讨如何在 Vue 项目中配置和使用 Vue Router。 首先，安装 Vue Router 可以通过运行 `npm install vue-router -S` 命令完成。在现代 Vue 项目中，Vue CLI 会询问是否需要安装 Vue Router，你...
vue路由传参中的params和query不要随意乱用
denglouhen的博客
06-12 3490
vue中的路由传参主要是分为两种方式：params和query。 主要用法就是写在push函数的参数对象中：this.$route.push({}); params的写法： this.$router.push({name: 'myPathName', params: {id: '1234'}}); 在目标页面获取id let id = this.$route.params.id; ...
vue-router query,parmas,meta传参
GeniusXYT的博客
01-11 1882
1.query，显示在导航栏？后，相当于get请求传参 this.router.push({path:'/login',query:{ 'redirect':'/home'}}) this.router.push({name:'Login',query:{ 'redirect':'/home'}}) 2.parmas，不会显示，相当于post请求传参 this.router.push({name:'Login',parmas:{ 'redirect':'/home'}}) // 目前测试没有query不行
vue-router全局参数自动加密、解密——crypto-js
最新发布
m0_60976718的博客
06-04 689
vue路由参数加密，实现全局自动加密解密
vue 在URL后动态添加query
weixin_44500533的博客
10-14 1496
数字 this.$router.push({ path: this.$route.path, query: Object.assign({}, this.$route.query, { _: +new Date() }) }) 字符串 this.$router.push({ path: this.$route.path, query: Object.assign({}, this.$route.query, { _: new Date() }) }) ...
vue-router中params和query的区别
字节叔叔
08-21 272
本文介绍了vue-router中params和query的区别。 1. query方式生成的url为/xx?id=id，params方式生成的url为xx/id 2. this.$router.push根据path来处理的话，只能用query，不能用params 3. params方式需要注意的是需要定义路由信息如：path: '/xx/:id',这样才能进行携带参数跳转，否则url不会进行变化，并且再次刷新页面后参数会读取不到。
vue3中界面使用router，以及使用watch来监听router的改变
浩星
11-09 8837
vue3中界面使用router，以及使用watch来监听router的改变
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。...vue-router传参两种方式：params和query params、query是什么？  params：/router1/:id ，/router1/1
vue-router 传参：query传参、params传参
weixin_49832841的博客
04-17 1万+
简单介绍了 query传参和 params传参这两种方式
vue路由传参和取参,四种方法,包会
蔡蔡
08-09 373
路由传参两种形式 1、name可以和params、query都可以一起使用； 2、path只能和query使用； 3、使用params传参 刷新后不会保存，使用query刷新后可以保存； 4、params不会在地址栏显示，query会在地址栏显示； 5、params能和动态路由一起使用，而query不能 ...
Vue Router 的params和query传参的使用和区别（详尽）
weixin_42408447的博客
06-30 3286
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; t
vue使用router路由进行跳转、传值（query、params）以及query与params传值方式的区别
weixin_50643050的博客
05-10 629
在vue日常使用中，虽然使用a标签进行跳转并不会报错，但是处于vue规范，还是推荐使用vue中自带的标签进行跳转，
watch一个路由对象this.$route
回纹勾边宝相花团
05-29 7058
问题来源： https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/login/index.vue watch: { $route: { handler: function(route) { const query = route.query if (query...
关于vue动态设置query路由报错问题的解决方案
xuefeng11111的博客
11-09 1687
vue动态编辑删除query路由报错 如果是通过$route.query获取的query进行删除之后再进行跳转的时候，vue路由会报重复跳转的错误 解决方案 将query对象克隆一份 deleteType() { const query = this.$route.query const newQuery = JSON.parse(JSON.stringify(query)) if (newQuery.type && newQuery.type === 'edit') { .
vue 中的动态传参和query传参
热门推荐
Yang Yong 的博客
07-17 4万+
Vue router 如何传参 params、query 是什么？ params：/router1/:id，这里的 id 叫做 params。例如/router1/123, /router1/789 query：/router1?id=123，这里的 id 叫做 query。例如/router1?id=456 query 方式传参和接收参数 传参: this.$router.push({ ...
Vue Router 的params和query传参的使用和区别
qq_26642611的博客
12-25 645
首先简单来说明一下router和router和router和route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' ...
vue路由中$route与$router，path与name，params与query的区别梳理
meng2lin的博客
12-07 6744
一、router和router和router和route的区别 $router : 是路由操作对象，只写对象 route:路由信息对象，只读对象栗子：//route : 路由信息对象，只读对象 栗子： //route:路由信息对象，只读对象栗子：//router操作 路由跳转 this.$router.push({ name:'hello', params:{ ...
vue-router 的params query传参
04-01
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) ``` 在上面的例子中，定义了一个 /user/:id 的路由规则，其中 :id 是一个占位符，可以接受任意的参数。 在组件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值