vue页面跳转传参

vue页面跳转传参

写vue的时候，在查看详情页面需要获取上一个页面触发点击事件按钮相应的id

vuex存储

最开始我就是想着可以直接用vuex仓库，在点击页面将id存入，在详情页面拿出来进行相应的调用。

//vuex下的store.js里面
const state = {
  id:"",
};
const mutations = {
  setIid(state, id) {
    state.id = id
  },
};
//点击页面
<el-table-column label="流水号">//这是在element table表格里面点击获取详情
  <template slot-scope="scope">
    <span class="openurl" @click="Opendetails(scope.row)">{{scope.row.tSerialNum}}</span>
  </template>
</el-table-column>
Opendetails(row) {
  this.setId(row.tId)
}
//详情页面
mounted: function() {
  console.log(this.id);//得到传过来的id，可以用此请求数据
  //......
}

记得在script标签里面引入import { mapState, mapMutations, mapGetters, mapActions } from “vuex”，还要把相应的属性或方法的映射加入

但是用vuex传值会在刷新之后失效

---

用localStorage传参

因为sessionId是存在localStorage里面了，所以就想这种页面间的传值是不是也可以用localStorage，但是如果这种传参比较多的话可能存储的地方会有点多，就pass掉了这个方法。

---

用路由query传参

后面又想起了可以直接在路由上面传参，为了方面就直接使用了query，它不需要去设置路由文件

//点击页面
<el-table-column label="流水号">
  <template slot-scope="scope">
    <span class="openurl" @click="Opendetails(scope.row)">{{scope.row.tSerialNum}}</span>
  </template>
</el-table-column>
Opendetails(row) {
  this.$router.push({name:'apply3_1',query:{id:row.tId}});
}
//详情页面
mounted: function() {
  console.log(this.$route.query.id);
  //......
}

路由如下：

---

用路由params传参

但是用query的话，路由上面会有键名，最好谁让他没有键名更安全
params需要设置路由的index.js文件，参数名要跟路由后面设置的参数名对应。
如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。

params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

//router下面的index.js文件
{
  path:'/apply3_1/:id/:index',
  name: 'apply3_1',
  component: apply3_1
}
//点击页面
<el-table-column label="流水号">
  <template slot-scope="scope">
    <span class="openurl" @click="Opendetails(scope.row)">{{scope.row.tSerialNum}}</span>
  </template>
</el-table-column>
Opendetails(row) {
  this.$router.push({name:'apply3_1',params:{id:row.tId,index：1}});
}
//详情页面
mounted: function() {
  console.log(this.$route.params.id);
  console.log(this.$route.params.index);
  //......
}

路由如下：