Vue使用router-link的传参和取值

最新推荐文章于 2024-05-01 06:00:24 发布

Radical 49

最新推荐文章于 2024-05-01 06:00:24 发布

阅读量746

点赞数

文章标签： vue js javascript

本文链接：https://blog.csdn.net/balloonhunter/article/details/106906739

版权

例：A组件跳转到B组件

A组件

<router-link :to="{ path: '/project' , query: { info: 123 } } ">
	跳转
</router-link>

B组件

//打印接收到的数据
console.log(this.$route.query.info)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Radical 49

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

vue项目——router-link传参多种方式

qq_40556950的博客

10-30

1366

简单来说，router-link是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到。 router-link传值几种方式：（还有其他方式的话小伙伴可以告诉我哟！）方式一： route.js内的路由配置:（需要在路径后定义上要穿的属性名） /: 属性名 { path: ‘/che...

Vue-Router 使用

xyf_xz的博客

01-10

vue 路由使用

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

vue router-link传参以及参数的使用实例

08-28

下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue push传值与router-link :to传值

sinat_42888557的博客

12-16

336

本文以query为例子 <router-link :to="{path:'/login',query: {activeName: 'first' }}">登录</router-link> <router-link :to="{path:'/register'query: {activeName: 'second' }}">注册</router-link&g...

router-link传递参数

weixin_30748995的博客

02-11

1193

有个功能：依据传入值，跳到产品详情页，但是详情页的内容依据传入值来相应变化。如果使用点击事件@clic来实现，则有三个重复的跳转代码。避免多次定义重复函数，可以使用router-link 传参数来函数该功能。带参数跳转： <div style="width: 40%;height: 180px;border: 1px saddlebrown solid;margin...

一个开源的Vue大屏数据展示组件库(1)

最新发布

2401_84447233的博客

05-01

509

数据尚未加载完成时，可以显示Loading效果，增强用户体验。Loading…边框均由SVG元素绘制，体积轻量不失真，使用极为方便。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。66%基本示例设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。增强版飞线图。

uniapp路由传参使用密文_uni-app 的router方案（大佬写的插件，借用一下并宣传）...

weixin_39984982的博客

01-13

1262

uni-simple-router一个更为简洁的Vue-router，专为 uni-app 量身打造简介说明:是否你也曾感叹过为啥官方就不搞一个类似直到此插件出来之前也没有一个更好的解决方法。于是它，没错，就是它，它诞生了。只要你会使用Vue-router即可马上上手，下面文档的完全不用看。它保留了Vue-router完全相似的书写风格，让你倍感亲切!大纲安装NPM复制代码npm insta...

vue中页面(路由)跳转及传值的几种方式 router-link + query + params

ougexingfuba的博客

11-24

1038

params传参，参数保存在了路由路径后面提前写的对应参数名里。可以这样说，params传的是值，而query是把参数名和值一起传过去了。id=123），所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。params传参，路由路径后面需要写/：参数名/参数名，传过来的参数就保存在这里，不写参数名的时候，用户一刷新传过来的参数就没有了。所以在传多个参数的时候，使用query比较好，如果使用params，还得在路由路径后面创建多个参数名。

Vue-路由系统

欢迎

06-09

493

单页面应用(SPA): 所有功能在一个html页面上实现前端官网: router.vuejs.org/zh/官网: router.vuejs.org/zh/步骤：下载vue-router模块到当前工程在main.js中引入VueRouter函数添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件引入组件创建路由规则数组 – 路径和组件名对应关系创建路由对象 - 传入规则把路由对象注入到new Vue实例中用router-view作

Vue-router

weixin_45516590的博客

08-13

668

一、Vue-router入门: 先看项目的目录结构所要写的vue文件放入components中。简单例子如下。新建一个hi.vue <template> <div class="hi"> {{msg}} </div> </template> export default { name: 'hi', data ...

vue-router的传参与取参汇总

weixin_43475207的博客

03-27

1821

vue-router的传参与取参汇总一. params方法1.通过传参与params取参2.通过编程式路由传参与params取参二.query方法1.通过传参与query取参2.通过编程时路由传参与query取参一. params方法 1.通过传参与params取参通过path中设置：id，目的是以后会往/foo后面添加一个id值，如/foo/id 例： const router = ne...

router-link中传值的三种方式

qq_38729043的博客

08-21

1万+

vue学习:router-link中传值的三种方式第一种传值 &lt;router-link tag="a" :to="{name: 'Exhibition', params: {img:item}}" class="thumbnail"&gt; &lt;img class="xk" :src

vue-router传参的四种方式超详细

前端开发工程师

06-21

4万+

工作中遇到的vue路由传参的四种方式

router-link的传值及接收

weixin_44717159的博客

08-30

2361

一、利用router-link传值普通的router-link标签写法 <router-link to="/path/path">点击页面跳转</router-link> 如果利用router-link传值里边的 to="" 变成 :to="",下面以我的代码为例 <router-link :to="{path: item.path, query: {value:chil.value, cindex:cindex}}">{{chil.title}}</ro

vue利用router-link 传参和获取参数的方式

青蛙背蝎子过河的博客

11-10

7310

本章只谈如何利用router-link传递query参数.暂时不谈编程导航传参.两者差不多.今天把router-link这种传参和获取参数的形式讲解清楚.希望对大家有帮助. 假如目前我们现在需要做一个项目.路由的设计是这样的: 主页:www.wangyiyinyue.com; 首页负责展示专辑封面;点击进去专辑详情页面; ...

Vue -- router-link(传参)

bobobocai的博客

12-14

2011

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下：无论是 HTML5 history 模式还是

如何使用router-link对象方式传递参数？