vue 使用vuex在页面跳转的实现方式

目录
  • vue 使用vuex在页面跳转
    • 第一种方式：使用 router 动态路由传参，将需要的数据带过去
    • 第二种方式：使用vuex
  • vuex 页面跳转参数存储获取
    • vue中我们用于页面跳转有三种方式
      • 首先需要
      • 接收页面

vue 使用vuex在页面跳转

学习时候碰到的需求场景：我的音乐列表，点击一个音乐项跳转到音乐详情页

第一种方式：使用 router 动态路由传参，将需要的数据带过去

音乐列表页组件：

音乐详情页组件：

音乐列表页通过selectSong方法传参，在音乐详情页的挂载完成里面将数据赋给songDetail，使其渲染页面。

第二种方式：使用vuex

下面有补充vuex的相关代码

音乐详情组件：

音乐列表页中通过引入mutations,将点击的li的数据提交传递到store中的song。在详情页中引入getters,获取store中的song数据。

这样在router里面就不需要配置动态路径参数，就简单的字符串。搭配使用vuex也能实现之前动态路由传参的效果啦。

在这里记录下这个简单vuex操作。也是由于自己对vuex不太熟悉，希望下次需要使用时可以来复习复习。

vuex的相关操作代码：新建一个store文件，将state,mutations，getters都单独建文件，在store的index.js中引入。同时要在main.js中将引入store并将其注入到根元素中。

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from  './mutations'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations,
  getters,
})

//state.js
const state = {
 song:{}
}
export default state
//mutations.js
const mutations = {
    get_song(state,song){
        state.song = song
    }
}
export default mutations
//getters.js
const getters = {
    song: state => state.song
}
export default getters

vuex 页面跳转参数存储获取

vue中我们用于页面跳转有三种方式

第一种：相当于get请求，参数会直接带在地址栏后path+query,path是路由的全路径。

接收页面用this.$route.query.feature来获取

第二种：相当于post请求，参数不会直接带在地址栏后name+params

接收页面用this.$route.params.feature来获取

第三种：

利用vuex来存储调转时页面的参数，这是因为当我们业务时页面跳转经常会带很多参数，又要求页面多开的情况时，只能选择get方式，因为需要在path后加上匹配id来保证一个页面根据查询特征不同而多次打开，可是get请求参数却是直接在地址后这样很不美观，因此利用vuex来存储参数，路由只用放上跳转地址即可：

首先需要

const store = new Vuex.Store({
state: {
parameters:{}//保存页面传参
},
getters:{
parameters : state => state.parameters
},
mutations: {
setParameters : (state,parametersData) => {//页面参数传递格式{key:‘key',value:‘value'}
if(parametersData){
//试了好久state.parameters[key]=value这样会报错只能先取出来添加属性再赋值
let parameters=state.parameters;
parameters[parametersData.key]=parametersData.value;
state.parameters=parameters;
}
}
},
modules
})
//放置参数
this.$ store.commit(“setParameters”,{key:‘faceAnalysis'+item.query.feature,value:this.query});
this.$ router.push({path:'/dataSelect/faceAnalysis/'+param.feature,query:{feature:this.query.feature})；

接收页面

let parameters=this.$ store.getters.parameters;
if(this.$ route.query.feature&&parameters[‘faceAnalysis'+this.$route.query.feature]){
var query=parameters[‘faceAnalysis'+this . $route.query.feature];
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • vue页面跳转实现页面缓存操作

    业务需求 打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷 第一步 在路由里面设置需要缓存的页面 第二步 使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的 第三步 在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷 第四步 在其他野区浪一波离开时设置为true,保证回到A野区

  • vue使用vuex实现首页导航切换不同路由的方法

    vue实现首页导航切换不同路由的方式(二)[使用vuex实现的],具体代码如下所示: <nav> <!-- 导航栏 --> <div class="indexNavOut"> <div class="indexNav"> <ul class="navLi"> <li @click="checkNav()" style="width: 130px;&qu

  • vue中页面跳转拦截器的实现方法

    本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r

  • Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    Vue实现关联页面多级跳转（页面下钻）功能的完整实例

    背景 在项目开发过程中,经常会遇到从上一个页面跳转到下一个页面的需求,俗称 下钻 .比如在概览页面的数据,需要查看详情,点击某个图表或按钮,即可跳转到详情页面查看详情数据. 目前为止,我们的项目中还没有一个统一的页面跳转方法,实现页面跳转的方式也因人而异,并且现有的很多项目只能在两个页面之间来回跳转,基本没有完整的实现多个页面互相跳转的功能. 关联页面跳转做为项目的常用功能,并且执行的都是重复性高的代码逻辑,非常有必要把相关的逻辑抽出来,封装成简单易用的公共方法和公共组件. 目的 统一各个项目的

  • vue 使用vuex在页面跳转的实现方式

    vue 使用vuex在页面跳转的实现方式

    目录 vue 使用vuex在页面跳转 第一种方式:使用 router 动态路由传参,将需要的数据带过去 第二种方式:使用vuex vuex 页面跳转参数存储获取 vue中我们用于页面跳转有三种方式 首先需要 接收页面 vue 使用vuex在页面跳转 学习时候碰到的需求场景:我的音乐列表,点击一个音乐项跳转到音乐详情页 第一种方式:使用 router 动态路由传参,将需要的数据带过去 音乐列表页组件: 音乐详情页组件: 音乐列表页通过selectSong方法传参,在音乐详情页的挂载完成里面将数据赋

  • Vue仿微信app页面跳转动画效果

    Vue仿微信app页面跳转动画效果

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬,根本就没有动画效果.于是我用Vue提供的组件过渡功能,写了个仿微信app页面跳转的动画,以提高用户体验. 废话不多说,直接上图 在600元骁龙632安卓测试机效果流畅. 代码量很少,已上传至GitHub https://github.com/YellowDoing

  • vue路由拦截及页面跳转的设置方法

    路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne

  • vue 页面跳转的实现方式

    一.this.$router.push() 1.vue <template> <div id='test'> <button @click='goTo()'>点击跳转4</button> </div> </template> 2.script //跳转前页面传参数: goTo(item) { //storageData中数据用于跳转到下一个页面之后,进行返回时能够返回到跳转之前的页面 let storageData = { searc

  • Javascript页面跳转常见实现方式汇总

    本文实例总结了Javascript页面跳转常见实现方式.分享给大家供大家参考,具体如下: 概述 相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下. 第一种:直接跳转加参数 <script language="javascript" type="text/javascript"> window.location

  • Shiro中session超时页面跳转的处理方式

    目录 session超时页面跳转的处理 问题描述 ajax请求超时处理 非ajax请求超时跳转 一个判断session是否过期的小技巧 1.session其实就是一个Map 2.session的过期时间是从什么时候开始计算的? 3.设置session的失效时间 4.如何判断session过没过期 session超时页面跳转的处理 问题描述 shiro在管理session后,在session超时会进行跳转,这里有两种情况需要考虑,一种是ajax方式的请求超时,一种页面跳转请求的超时. 本文从这两个

  • vue实现登录后页面跳转到之前页面

    在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

随机推荐