前段时间项目用vue搭建整个前端页面，我负责的模块有个地方在页面跳转时得将参数传递到下一个页面，但是由于参数较多，用url带参数传递不是特别好，我尝试了多种方法想在页面之间传递参数都没成功，最后想到了vuex，当时又是刚开始学vue对vuex更是了解不多废了一点时间，好在问题解决了，下面分享我解决问题的代码，希望对大家有所帮助。

一.页面跳转通过路由带参数传递数据

// 1.页面中的代码
this.$router.push({name: 'generalAdminOrderFlowAdd',params: {type: 'add',templateType: this.orderTemplateType}})// 2.路由中的代码{path: ':type/:templateType',name: 'generalAdminOrderFlowAdd',component:   require('@/components/generalAdmin/order/orderFlow')
}
// 3.获取页面中的参数值let type = this.$route.params.type

二.使用vuex进行数据传递

// 1.index.js页面代码
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'Vue.use(Vuex)
const state = {order: {} //声明order对象
}
export default new Vuex.Store({state,mutations,actions,getters
})

//2. getters.js页面的代码
export default {// 声明获取order的方法getOrder (state) {return state.order}
}

//3. mutation.js页面的代码
export default {
//设置order的值SET_ORDER (state, order) {state.order = order}

// 4.在页面中设置调用set方法设置全局order的值
this.$store.commit('SET_ORDER', order)// SET_ORDER为order值的设置方法的方法名

// 5.获取全局的order值// 从vuex中获取order
let template = this.$store.state.order

---------------------------------------------------------------------------------------------------------------

方法一：

运用JS方法传递，this.$router.push({name:'测试页面',params:{'属性名':'属性值'}});

这里的name 是要传递到某个页面上的页面名称。

方法二：

运用vue的属性方法传递，:to="{name:'测试页面',params:{''属性名:'属性值'}}" （name同上）

注：使用 :to 传值，需要在URL中配置相应的属性名，如 '测试页面'的 path 为

/test ，需要变为 /test/:属性名，若传递多个属性，则在后面添加即可如 /test/:属性名1 :属性名2 :属性名3

目标页面上取值：

'测试页面' 上的JS方法取值，this.$router.params.属性名，即可获取到相对于的属性值。

具体使用哪一种传值方法，根据需要，但取值的方法是统一的。

-----------------------------------------------------------------------------------------------------

一、用name传递参数

　　用name传值并显示在模板里：

1在路由文件src/router/index.js里配置name属性。

routes: [{path: '/Message',name: 'Message',component: resolve => require(['../components/page/Message.vue'], resolve)}
]

2.传值页面写法：

注意： listInfo 是值的名字，在接收值的页面需要用到

3.接收值的页面：

二、通过<router-link> 标签中的to传参

上边的传参或许很不正规，也不方便，其实工作中多数传参是不用name进行传参的，我们用<router-link>标签中的to属性进行传参，需要注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

1	<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。
了解基本的语法后，我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

1

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

1

{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

1

{{$route.params.username}}

vue-router 利用url传递参数　

　　:冒号的形式传递参数

　　　　　　在路由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

1

2

3

4

{

path:'/params/:newsId/:newsTitle',

component:Params

}

我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

1

<router-link to="/params/198/jspang website is very good">params</router-link> |

　　正则表达式在URL传值中的应用

上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。

加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

1	path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。

vue中参数传递（合集）相关推荐

vant 半圆仪表盘_超全的 Vue 开源项目合集，签收一下
原标题:超全的 Vue 开源项目合集,签收一下写在前面包括一些ui库和比较完整的小项目.ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进度条,分页,弹框,通知,导航菜单,步骤 ...
《巴菲特2020致股东信》中文版全文丨附1957-2019高清中英文版合集下载
数据猿报道在数据猿后台回复关键词"巴菲特",还可下载<巴菲特致股东的信1957-2019中英文版合集> 大数据产业创新服务媒体 --聚焦数据 · 改变商业北京时间2 ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
开箱即用，超实用的 Vue 自定义指令合集
作者:Huup_We juejin.cn/post/6963840401899782175 在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底 ...
超全的 Vue 开源项目合集
原文https://my.oschina.net/u/3018050/blog/2049912 包括一些ui库和比较完整的小项目.ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进 ...
前端高频vue面试题合集
路由的hash和history模式的区别 Vue-Router有两种模式:hash模式和history模式.默认的路由模式是hash模式. 1. hash模式简介: hash模式是开发中默认的模式, ...
windows系统安装VUE 踩地雷合集(使用webpack-simple)
首先是下载一个node.js安装包.目前就下最新的吧.(下载最新版本可能要降版本),然后安装cnpm的淘宝镜像.安装之前建议参阅npm的安装机制. 本文档参考自:Jinkey原创Vue2.0 新手完全 ...
2019暑假·纪中记合集（持续更新）
文章目录日程 Day0-Day3 Day4 Day5 Day6 Day7 Day8 Day9 总结日程 Day0-Day3 适应+日常.反正很乖. Day4 逐渐开皮.(反正你也不知道我在皮什么) ...
2021年最新Web前端HTML,CSS,Vue,React,Jquery大概率面试题合集
CSS3 HTML5 前端面视题 1.Css3新增的特性边框: border-radios 添加圆角边框 border-shadow:给框添加阴影 (水平位移,垂直位移,模糊半径,阴影尺寸,阴影颜色 ...

vue中参数传递（合集）

一.页面跳转通过路由带参数传递数据

二.使用vuex进行数据传递

一、用name传递参数

二、通过<router-link> 标签中的to传参

vue-router 利用url传递参数

:冒号的形式传递参数

正则表达式在URL传值中的应用

vue中参数传递（合集）相关推荐

最新文章

热门文章