$route.query.id的用法

最新推荐文章于 2024-06-20 11:34:18 发布

hamimelon2020

最新推荐文章于 2024-06-20 11:34:18 发布

阅读量2k

点赞数

分类专栏： JavaScript vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_40945354/article/details/120717402

版权

本文详细介绍了在Vue.js应用中如何在组件中使用$route.query.id来获取URL查询参数，通过实例展示了在Book.vue、router/index.js和App.vue文件中的具体用法。

摘要由CSDN通过智能技术生成

Book.vue文件

<template>
    <div>图书ID：{
   {
    $route.query.id }}</div>
</template>

<script>
export default {
   

}
</script>

同时router/index.js文件

import {
    createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hamimelon2020

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

$route.params.id是什么，与$route.query.id有什么区别？

weixin_40945354的博客

10-12

579

index.js { path: '/book/:id', component: Book } Book.vue <template> <div>图书ID：{{ $route.params.id }}</div> </template> <script> export default { } </script> App.vue <template> <p

使用VueResource发起get请求，使用this.$route.query.id

weixin_40499698的博客

11-19

3234

文章目录一、使用VueResource发起get请求二、router-link配置三、router index.js配置一、使用VueResource发起get请求 1.this.$route.query.id：在router-link中会配置query.id <template> <div> <div> <p>标题：{{ blog.title }} </p> <p&g

参与评论您还未登录，请先登录后发表或查看评论

PostgreSQL计算 queryid 原理

最新发布

zxwsbg的博客

06-20

853

这个 sql 中，如果将 id语义分析->生成计划->执行计划等阶段，而 queryid 的计算就是在语义分析阶段的。上述过程完成后，就得到了一个完整的 jumble 字符串。

vue 路由id_Vue--路由带参跳转--/login?id=10--接收this.$route.query.id

weixin_39524574的博客

01-13

426

Document登录注册var login = {template: '登录 --- {{ $route.query.id }} --- {{ $route.query.name }}',data(){return {msg: '123'}},created(){ // 组件的生命周期钩子函数// console.log(this.$route)// console.log(this.$route...

图书ID：{{ $route.query.id }} 这个没能生效，为什么？

weixin_40945354的博客

10-11

280

图书id：1 图书id：2 没能显示出来，为什么呢？

【vue】$route.query，获取路由中的参数

weixin_39266845的博客

07-26

5096

【vue】$route.query，获取路由中的参数

Vue之this.$route.query和this.$route.params的使用与区别

wwyxjjz的博客

08-19

4233

项目中遇到禁止url带参数，于是整理一下常用的两种传参方式的区别吧一、this.$route.query的使用 1.传参数 this.$router.push({ path: '/trading', query:{ id:id, } }) 2.获取参数(query相对应的是pathparams相对应的......

vue.js this.$router.push获取不到params参数问题

11-20

在Vue.js应用中，路由是页面之间导航的关键组成部分。`this.$router` 是Vue Router提供的一个实例，用于处理页面的导航。...因此，确保正确地使用`query`或`params`，并根据需求选择合适的方法传递参数。

前端人，这种情况你不该用$route.query

weixin_41190571的博客

12-16

1152

使用Vue Router这种情况下你不该用$route.query 话说前2天刚接手前同事的项目（入坑，哈哈）。今天突然产品来找我说：“victor，生产上接到用户反馈说自己登陆系统后，当前登录用户名没有显示出来！”。我当时马上回应说：”不应该啊！”。首先说明下翻车的事故经过：我们的系统是采用单点登录(SingleSignOn，SSO)。当前用户登录统一应用入口后选择需要进入的应用，后台会在location加上用户统一身份认证的加密字符串然后去访问你的web应用。前端同学只需拿到当前经过加密的co

路由的query参数

richest_qi的博客

03-09

2268

文章目录Message组件发送query参数Detail组件接收query参数本例基于路由的基本使用、嵌套路由的实现。项目目录如下：一般组件components/Banner.vue <template> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"><h2>Vue Router Demo</h2></div>

Vue知识整理，专题之路由：5、路由传参-使用query方式传递路由参数

鲁迷那的专栏—坚持实践后再写出来！

03-29

6922

目录一、前言二、路由传参-使用query方式传递参数 1、路由实例简约版，router挂载简写 2、使用query方式传递参数（1）router-link 标签 to属性添加参数 id，不需要修改路由规则的 path 属性（2）怎么在组件内部拿到这个参数id （3）怎么把 id的值放到 h1标签里面 3、使用query方式传递多个参数 4、最终修改后的代码 ***5......

Vue学习笔记

RichardFreedom的博客

03-05

379

nanoid:随机数：npm i nanoid 父组件发送：子组件声明接收

vue之this.$route.query和this.$route.params的使用与区别（有例子方便理解）

weixin_42125732的博客

04-27

2177

1.this.$route.query的使用 params、query是什么？ params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。首先我们先看看路由index.js的定义传参数如下： this.$router.push('/productdetail?id='+id) //注意这里路由没有带/:id 接收参数： co

路由的三种传参方式

weixin_62260350的博客

10-09

1062

路由的传参方式

vue监听router路由中query参数变化

qq_42103673的博客

06-08

1万+

vue监听router路由中query参数变化

vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别