vue2 路由传参

LUNA~

已于 2024-07-23 15:05:26 修改

阅读量110

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2023-04-26 15:07:42 首次发布

本文链接：https://blog.csdn.net/CMDN123456/article/details/130386590

版权

vue 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

文章讲述了在Vue.js应用中如何通过路由进行参数传递，例如使用`this.$router.push`将`modelID`作为参数，然后在目标页面如何利用`this.$route.params.data`来接收并打印这些传入的参数。

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

1. 路由传参

let _this=this;
_this.$router.push({
          name: "messageIndex",  //路由名称
          params: {
            data: _this.modelID, //参数
          },
        });

2. 接收路由的参数

    console.log("选择型号后进来获取的值===", this.$route.params.data);

Vue3 传参是使用query，把params替换成query即可！

Vue3路由传参-CSDN博客

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LUNA~

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue-路由传参的方法与区别

GTbond的博客

01-11

2399

路由传参 1. 通过路由属性中的name来确定匹配的路由，通过params来传递参数父组件 this.$router.push传递参数 //html <button @click="toChild"> </button> //方法 toChild(){ this.$router.push({ name:''ChildView", params:{ id : 1, age:20, ··· } }) } 子组件使用this.rout

vue2[初级] 路由组件传参

u011664286的博客

09-25

712

vue 路由组件传参 params方式传参，query方式传参

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

【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

最新发布

工作的日常记录和平凡的生活分享

07-03

3205

路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。 - 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时，将渲染 `User` 组件，其中 `:id` 是一个动态参数。 - 组件映

vue2路由传参

meng0905521的博客

09-28

5010

更适合于编程小白；详细阐述vue2三种编程式传参方式的写法、以及注意事项。

VUE.JS-路由的props配置

XiaoSen207的博客

11-30

528

在其相应的单页面文件中写入： <template> <ul> <li>消息编号：{{id}}</li> <li>消息标题：{{title}}</li> </ul> </template> <script> export default { name:'Detail', props:['id','title'], computed: { // id(){ //

VUE2的路由传参方式

m0_66051368的博客

03-05

2913

方式一：利用 ? 传递参数，保存在this.$route.query 属性里方式二：利用 /xx/xx ，简化前提是需要到路由中进行参数配置，保存在this.$route.params属性里方式三：让组件利用 props属性自动解构出路由参数代码展示： app.vue <template> <div>  <!-- 传参写法1: 借鉴原生的URL参数格式利用 ? 传递参数 --&gt......

id vue2路由传参_Vue中路由传参

weixin_42355999的博客

12-29

258

路由传参并接收参数注意点：在路由配置文件中，需要给组件定义路由后，才能在浏览器中输入地址访问该页面；若想传参并且获取参数，必须有下面这种路由配置{path:'/组件路由名称/:参数名称'，component：组件名}组件中给路由传参ps:传参时是this.$router,接收参数是this.$route`1.$router为VueRouter实例，想要导航到不同URL，则使用$router.pus...

vue动态路由配置及路由传参的方式

12-10

　这就要用到动态路由跟路由传参了！首先我们来了解下router-link这个组件：　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就...

vue路由传参 vue路由传参

11-18

Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 是实现单页面应用（SPA）功能的重要组成部分。在构建SPA的过程中，我们经常需要在不同的路由之间传递参数，以便于组件之间共享数据。Vue Router 提供了两种...

vue路由传参的基本实现方式小结【三种方式】

01-19

本文实例讲述了vue路由传参的基本实现方式。分享给大家供大家参考，具体如下：前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 ...

初学vue2 之 路由传参

xinbear的博客

07-15

363

一 params传参1.设置路由 name和data是参数名export default new Router({ routes: [ ... { path: '/routerparams/:name/:data', name: 'routerparams', component: routerparams } ] })2.跳转...

Vue2路由传参总结

辰苏.的博客

08-21

2121

Vue路由跳转

Vue2路由中的参数传递

qq_38782335的博客

04-05

440

Vue2中的路由配置以及demo。

Vue2路由：手动配置使用路由&路由嵌套、路由动态传参（:参数，query、props）、编程式导航（back、go）、导航守卫

欢迎来到长风沛雨的博客

03-05

6407

导航守卫可以控制路由的访问权限例如：在首页，点击导航进入后台主页，需求是在用户登录账号以后才可访问但是，在未登录的情况下，是可以直接访问到Main后台主页的就需要通过导航守卫来控制是否可以跳转如果没有登录，访问main主页的话，就会强制跳转到登录页面。

vue2.x路由传参方法总结

a2886015的博客

03-10

1856

1、采用<router-link> 标签中的to传参传递的页面 <router-link :to="{'name':'addClue', params: {'type': 1}}"></router-link> router.js中 path: 'addClue/:type', name: 'addClue', component: addClue 其中path是否可以不加上:type有待商量获取参数的页面： This.$...

vue2.x的学习之路--vue路由的传值

怎么写，解决问题的博客

07-30

233

方法一：  const routes = [ { path: '/home', component: Home }, { path: '/new', component: New }, { path: '/details/:id', component: Detai...

【vue2第十六章】VueRouter 声明式导航(跳转传参)、路由重定向、页面未找到的提示页面404、vue路由模式设置

weixin_72979483的博客

09-07

741

声明式导航(跳转传参) 在一些特定的需求中，跳转路径时我们是需要携带参数跳转的，比如有一个搜索框，点击搜索的按钮需要跳转到另外一个页面组件，此时需要把用户输入的input框的值也携带到那页面进行发送请求，请求数据。路由重定向配置当访问到"/"时，就用redirect属性重定向到需要显示的页面，这样就可以解决页面进入时空白的问题也可以使用重定向做一些其他的功能不限于此，看需求。 vue路由模式设置

vue2 vue路由的 params传递的参数居然区分类型。但是!!!有坑，刷新就都是字符串了....

斜杠的博客

12-11

2635

最近写了个项目，惊奇发现（可能大惊小怪），在params传递的‘0’和0居然能区分类型，难道不是浏览器地址栏截取的字符串！！代码大概如下(仅供参考)： router/index.js ....... { path: '/Frame/:userId', name: 'Frame', component: Frame, beforeEnte...