vue实战2-----怎么将数据带到另一个页面并反显,并返回到原页面,数据还在?

怎么将数据带到另一个页面并反显,并返回到原页面,数据还在?
一,先结局第一个问题,怎么将数据带到另一个页面并反显出来
1,第一个方法:将参数放在地址后面,也就是get请求:地址?+参数(也就是传过去参数)

onDetail() {
        console.log(this.listQuery.departName)
        this.$router.push("/couponsSystem/couponsManage/fullCutCoupons/index?channel="+this.listQuery.channel+"&scene="+this.listQuery.scene+"&departName="+this.listQuery.departName+"&couponFirstType="+this.listQuery.couponFirstType);
      },

2,怎么接收参数?

created() {
    this.getParams()
    }
methods:{
getParams() {
      this.listQuery.channel = **this.$route.query.channel**//注意是这样get到传过来的参数的
      this.listQuery.couponFirstType = this.$route.query.couponFirstTypeId
      this.listQuery.scene = this.$route.query.sceneId
      this.listQuery.departName = this.$route.query.departName
      this.listQuery.couponFirstTypeName= this.$route.query.couponFirstTypeName
      this.listQuery.sceneName= this.$route.query.sceneName
      this.listQuery.departId = this.$route.query.departId
    },

}

二:第二种方法:参数放在地址后面肯定不安全,所以改成放在cookie里面
首先:创建一个工具类–创建存放进cookie和从cookie中取出的方法

**import Cookies from 'js-cookie'**//注意这句话--要先引入cookie

export function getListQuery(key) {

  if (Cookies.get(key) != undefined && Cookies.get(key) != "") {
    return JSON.parse(Cookies.get(key))
  }
  return ""
}

export function setListQuery(key,value) {
  var listQuery = JSON.stringify(value)
  Cookies.set(key, listQuery)
}

export function removeListQuery(key) {
  return Cookies.remove(key)
}


export function getNavigation() {
  return Cookies.get("navigation")
}

export function setNavigation(navigation) {
  return Cookies.set("navigation", navigation)
}

export function setCreation(key,value) {
  var creation = JSON.stringify(value)
  Cookies.set(key, creation)
}

export function getCreation(key) {

  if (Cookies.get(key) != undefined && Cookies.get(key) != "") {
    return JSON.parse(Cookies.get(key))
  }
  return ""
}

export function setSearch(key,value) {
  var search = JSON.stringify(value)
  Cookies.set(key, search)
}

export function getSearch(key) {

  if (Cookies.get(key) != undefined && Cookies.get(key) != "") {
    return JSON.parse(Cookies.get(key))
  }
  return ""
}

export function getFlag() {
  return Cookies.get("flag")
}

export function setFlag(flag) {
  return Cookies.set("flag", flag)
}

export function getSaveFlag() {
  return Cookies.get("saveFlag")
}

export function setSaveFlag(saveFlag) {
  return Cookies.set("saveFlag", saveFlag)
}

第二步:set数据到cookie

import {setCreation} from '@/utils/costStatsCookie'
onDeatail(){
var creation = {channel:""+this.listQuery.channel+"", sceneName:""+dataName+"", sceneId:""+dataId+"", departName:""+dName+"", departId:""+dId+"", couponFirstTypeName:""+cftName+"", couponFirstTypeId:""+cftId+""};
        setCreation("creation",creation)
        this.$router.push("/couponsSystem/couponsManage/"+url+"/index");
}

第三步:从cookie中get数据

import {getCreation} from '@/utils/costStatsCookie'
getParams() {
      var creationParams = getCreation("creation")
      if(creationParams!= "") {
        this.listQuery.channel = creationParams.channel
        this.listQuery.couponFirstType = creationParams.couponFirstTypeId
        this.listQuery.scene = creationParams.sceneId
        this.listQuery.departName = creationParams.departName
        this.listQuery.couponFirstTypeName = creationParams.couponFirstTypeName
        this.listQuery.sceneName = creationParams.sceneName
        this.listQuery.departId = creationParams.departId
      }
    },

二,第二个问题:怎么使跳转到另一个页面,传过去的数据,再返回到原页面的时候数据还在?

解决方法(思路):跳转到另外一个页面并带数据之前,将数据放在cookie中,等返回到原页面的时候,再从cookie中取出来就可以了。

实现代码:
跳转前的页面的代码有如下:

 import {setSearch,getSearch,getFlag,setFlag} from '@/utils/costStatsCookie'
methods(){
	onDetail(){
	**setSearch("search",this.listQuery)**
	        var creation = {channel:""+this.listQuery.channel+"", sceneName:""+dataName+"", sceneId:""+dataId+"", departName:""+dName+"", departId:""+dId+"", couponFirstTypeName:""+cftName+"", couponFirstTypeId:""+cftId+""};
	        setCreation("creation",creation)
	        this.$router.push("/couponsSystem/couponsManage/"+url+"/index");
	      },
	}
}
created(){
 //初始化页面时获取cookie中保留的搜索记录
      var flag = getFlag()
      if(getSearch("search") != "" && flag == "false"){
        this.listQuery = getSearch("search")
         flag = "true";
         setFlag(flag)
        this.getList();
      }
}

跳转之后的那个页面的代码:

import {getCreation,setFlag,setSaveFlag} from '@/utils/costStatsCookie'
 back() {
      var flag = "false";
      setFlag(flag)
      this.$router.push("/couponsSystem/couponsManage/couponsList/index");
    },

注意:setFlag和getFlag中的flag的作用是标识作用,也就是啥时候返回到原页面,啥时候原页面才去取跳转之前放到cookie中的数据,要不然如果没有这个标识,直接取,就会产生:只要跳转到这个页面就会取出来这些数据显示到页面中,如果没有关闭浏览器,比如用户退出换了个账户登录,一进这个页面,这些数据取出来还会显示到这个页面,肯定不对嘛。因为用户根本没有操作任何,怎么就会有数据显示

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 Vue Router 来实现页面之间的跳转,并使用 Element Plus 的筛选组件来筛选数据。下面是一个简单的示例: 首先,安装 Vue Router 和 Element Plus: ```bash npm install vue-router element-plus ``` 然后,在您的 Vue 项目中创建一个路由文件(比如 `router.js`),并配置路由信息: ```javascript import { createRouter, createWebHistory } from 'vue-router'; import HomePage from './components/HomePage.vue'; import FilteredPage from './components/FilteredPage.vue'; const routes = [ { path: '/', component: HomePage }, { path: '/filtered', component: FilteredPage }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 接下来,将路由器配置应用到您的 Vue 实例中: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 在您的首页组件(`HomePage.vue`)中,可以添加一个按钮,并通过 `router-link` 组件来实现跳转: ```html <template> <div> <h1>Home Page</h1> <router-link to="/filtered"> <button>Go to Filtered Page</button> </router-link> </div> </template> ``` 在筛选页面组件(`FilteredPage.vue`)中,您可以使用 Element Plus 的筛选组件来筛选数据: ```html <template> <div> <h1>Filtered Page</h1> <!-- 筛选组件的代码 --> </div> </template> <script> export default { // 筛选组件的逻辑 } </script> ``` 这样,当用户在首页点击按钮时,就会跳转到筛选页面,并且您可以在筛选页面中使用 Element Plus 的筛选组件来筛选数据。 请记得根据您的具体需求进行适当的修改和调整。希望对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值