vue $router路由传值

点击标签vue传值方法

1. 点击标签vue query传值方法

<el-table-column fixed="right" label="操作" width="" align="center">
	<template slot-scope="scope">
	 <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
	   <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
	 </el-tooltip>
	</template>
	</el-table-column>
</el-table>

2. 跳转下一个页面带值

//在methods下代码
handleClick(row) {//查看详情查看详情
      this.dialogData=row;//存到data上的值
      let userrow = this.dialogData;
      let parObj = JSON.stringify(userrow);
      this.$router.push({path:"/unify",query:{userrow:parObj}})//路由传值
    },

3. 到详情页面接收值

	created(){//页面加载
	  this.pageList()
	},
	computed: {
	},
	methods:{
	    pageList() {//加载页面请求列表数据
	     var _this = this;
	      _this.dialogData = JSON.parse(this.$route.query.userrow)
	    },
	}

这个是根据url进行传参刷新页面数据不会丢。

4. 不用query传参，用params传参刷新页面数据会丢失

handleClick(row) {//查看详情查看详情
      this.dialogData=row;
      let userrow = this.dialogData;
      let parObj = JSON.stringify(userrow);
      this.$router.push({name:"unify",params:{userrow:parObj}})//路由传值
    },

跳转unify页面接收参数

_this.dialogData = JSON.parse(this.$route.params.userrow)

这个传值方法刷新页面数据会丢失。

5. vuex 方式传值但是也是刷新页面丢失数据。

**//1.安装viex**
npm install vuex --save

**//2.在src文件下创建store文件然后创建store.js代码如下：**

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    value:[]
  },
  mutations: {
    setId(state ,value) {
        state.value = value     
    }
  }
})
export default store

**//然后在main.js文件引用store.js**
import store from './store/store'  // 引入store 对象

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

A页面跳转B页面需要传值代码：

this.$store.commit( 'setId',parObj)//setId根据store.js配置的
this.$router.push("/unify")

到B页面接收值代码：

_this.dialogData = JSON.parse(this.$store.state.value) //state.value也是在store.js配置的

6. vue用sessionstorage和localstorage进行数据存储这样刷新页面数据就不会丢失。

点击标签事件给详情页面传参用的sessionStorage关闭标签才清除数据用localstorage把sessionstorage替换掉就可以，localstorage得关闭浏览器才能清除数据，根据需求用吧！

handleClick(row) {
      this.dialogData=row;
      let userrow = this.dialogData;//这里多个数据
      let parObj = JSON.stringify(userrow);//转换字符串可以存多个数据
      sessionStorage.setItem("detail",parObj);//sessionStorage传值
      this.$router.push("/unify");
    },

详情页接收数据

_this.dialogData = JSON.parse(sessionStorage.getItem('detail'))//转换回字符串

清除数据

sessionStorage.removeItem("detail")

介绍完毕给个关注吧！！！！！！！！！