前段时间项目用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和新闻标题。
  1. 在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组件就没有办法接收到。

Logo

前往低代码交流专区

更多推荐