vue-router常用传参方式

我就是我 2023-01-05 12:14 118阅读 0赞

# No.1 #

<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>

this.$route.query.userId  // 123
    this.$route.query.userName  // xia

> http://localhost:8080/test?userId=123&userName=xia

# No.2 #

<router-link :to="{name:'test',params: { userId: 123,userName:'xia' }}">跳转</router-link>
    
    
    <router-link :to="{path:'/test',params: { userId: 123,userName:'xia' }}">跳转</router-link>

this.$route.params.userId  // 123
    this.$route.params.userName  // xia

> http://localhost:8080/test

# No.3 #

// router.js
    { 
        path: '/test/:userId/:userName?', //?问号的意思是该参数不是必传项
        name: 'test',
        component: 'test.vue',
        props: true,
    }

this.$route.params.userId  // 123
    this.$route.params.userName  // xia

> http://localhost:8080/test/123/xia

# $router & $route #

this.$router.go(-1);  // 向前或者向后跳转n个页面，n可为正整数或负整数
    this.$router.push('/'); // 跳转到指定url路径，history栈中会有记录，点击返回会跳转到上个页面
    this.$router.replace('/'); // 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

// 获取路由传递过来的参数
    this.$route.params.userId  
    this.$route.query.userName

发表评论取消回复

表情：

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

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

相关阅读

相关 Mybatis用xml配置sql传参方式

1、传入一个参数方法： int deleteByPrimaryKey(Integer id); 配置 <delete id="deleteBy...

绝地灬酷狼/ 2024年04月17日 14:34/ 0 赞/ 75 阅读

相关 Swagger指定传参方式

@ApilmplicitParam配置一个参数 paramType="query" 加在后面就行了。这个属性是指定参数放的位置的。 paramType：参数放在哪个地方

我会带着你远行/ 2024年03月29日 16:07/ 0 赞/ 89 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 128 阅读

相关函数的传参方式

文章目录函数的传参总结 -------------------- > 注：我的笔记风格，可能不会特别官方，不会晦涩难懂，而是以一个初学者能

迈不过友情╰/ 2023年09月29日 15:57/ 0 赞/ 19 阅读

相关 axios常见传参方式

[https://www.cnblogs.com/zhaojunhao/p/9622004.html][https_www.cnblogs.com_zhaojunhao_p_

冷不防/ 2023年06月30日 09:07/ 0 赞/ 28 阅读

相关 axios的传参方式

[https://www.cnblogs.com/liangweiping/p/11533162.html][https_www.cnblogs.com_liangweipin

柔光的暖阳◎/ 2023年06月30日 09:06/ 0 赞/ 22 阅读

相关 vue-router常用传参方式

No.1 <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</

我就是我/ 2023年01月05日 12:14/ 0 赞/ 119 阅读

相关 mybatis传参方式

mybatis一直都在使用注解方式，今天有个业务逻辑使用5个参数经行模糊查询，决定在XML中使用动态sql。 ![SouthEast][] 但是在测试的过程中控制台报

小鱼儿/ 2022年09月29日 04:27/ 0 赞/ 284 阅读

相关 angularjs页面传参方式

1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.ht

ゝ一世哀愁。/ 2022年09月26日 02:44/ 0 赞/ 275 阅读

相关 C++引用方式传参，传值方式传参（*、&）

C++引用方式传参，传值方式传参（\、&）和数组作为参数传递 1、引用方式传参 2、传值方式传参

「爱情、让人受尽委屈。」/ 2022年02月22日 15:04/ 0 赞/ 482 阅读