需求: 从 A 页面的第三页跳出去之后, 再返回来 A 页面, 要停留在第三页;
重点: 如何将当前的页码保存下来, 等返回来的时候再调出来去取后台的数据;
- <!-- 项目列表 -->
- <template>
- <div>
- <c-breadcrumb :items="breadcrumb"></c-breadcrumb>
- <!-- 搜索框 -->
- <el-row>
- <el-col :span="12" class="tal">
- <label > 关键字:</label>
- <el-input
- placeholder="请输入项目域名来查找"
- v-model.trim="keyword"
- @keyup.enter.native="searchList"
- class="mb20"
- size="small"
- style="width: 240px;">
- <el-button slot="append" icon="el-icon-search" @click="searchList"></el-button>
- </el-input>
- </el-col>
- <el-col :span="12" class="tar">
- <label > 部门:</label>
- <el-select
- v-model.trim="department_id"
- size="small"
- placeholder="请选择部门"
- filterable
- @change="searchList()"
- >
- <el-option
- v-for="(item, index) in departmentList"
- :key="index"
- :label="item.title"
- :value="item.id"
- >
- </el-option>
- </el-select>
- </el-col>
- </el-row>
- <!-- 表格 -->
- <template>
- <el-table
- :data="tableData"
- center
- size="mini"
- style="width: 100%"
- :show-header="true"
- :header-cell-style="{background:'#f6f6f6'}"
- >
- <el-table-column prop="id" label="项目 ID" width="60"></el-table-column>
- <el-table-column prop="created_at" :formatter="this.$datetimeFormat" label="创建时间" width="180"></el-table-column>
- <el-table-column label="操作" width="100">
- <template slot-scope="scope">
- <el-button
- type="text"
- size="mini"
- @click="checkPro(scope.row.id)"
> 查看 </el-button>
- </template>
- </el-table-column>
- </el-table>
- </template>
- <!-- 分页 -->
- <div class="block mt20">
- <el-pagination
- v-if="totalCount"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage"
- :page-sizes="[15, 20, 30]"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="totalCount">
- </el-pagination>
- </div>
- </div>
- </template>
- <script>
- import API from '../../api/index';
- import CBreadcrumb from '../../components/breadCrumb'
- export default {
- name: "product",
- components: {
- CBreadcrumb
- },
- computed: {
- // 项目域名下拉数据
- departmentList () {
- return this.$store.state.departmentList;
- }
- },
- data () {
- return {
- breadcrumb: [
- {label: '系统管理'},
- {label: '项目列表', path: '/manage/product'}
- ],
- tableData: [],
- sourceList: [
- {id: '', title:'全部'},
- {id: 1, title: '智能监测'},
- {id: 2, title: '快速扫描'},
- {id: 3, title: '智能排雷'},
- ],
- source: '',
- select: '',
- currentPage: 1, // 当前页码
- totalCount: 0, // 总共 0 条数据
- pageSize: 15, // 每页两条
- keyword: '',
- uid: 0,
- userList: [{id: 0, username: '全部', port: ''}],
- department_id: 0
- }
- },
- methods: {
- handleSizeChange (val) {
- this.pageSize = val;
- this.searchList();
- },
- handleCurrentChange (val) {
- // 改变当前的页码, 并给路由添加参数, 参数与页码保持一致
- this.$router.push({path: this.$router.path, query: {page: val, department_id: this.department_id}});
- this.currentPage = val;
- this.getList();
- },
- // 获取用户列表
- getUserList() {
- API.getSelsectUser().then((response) => {
- let res = response.data;
- if (res.code == 0) {
- let newUserList = res.data;
- this.userList = this.userList.concat(newUserList);
- } else {
- this.$message({
- message: res.message,
- showClose: true,
- type: 'error'
- })
- }
- })
- },
- // 获取项目列表
- getList() {
- API.getDomainList(this.uid, this.department_id, this.keyword, this.currentPage, this.pageSize, this.source).then((response) => {
- let res = response.data;
- if (res.code == 0) {
- this.tableData = res.data.items;
- // 改变分页器条目总数
- this.totalCount = res.data.pagination.totalCount;
- } else {
- this.$message({
- message: res.message,
- showClose: true,
- type: 'error'
- })
- }
- });
- },
- // 查看按钮
- checkPro (id) {
- let routeData = this.$router.resolve({
- name: "查看项目内容",
- query: {
- id: id
- }
- });
- Windows.open(routeData.href, "_blank");
- // this.$router.push({path: '/manage/viewProduct', query: {id: id}});
- },
- // 域名切换
- searchList () {
- this.currentPage = 1;
- this.$router.push({path: this.$router.path, query: {page: 1, department_id: this.department_id}});
- this.getList();
- },
- },
- created () {
- // 获取部门列表
- this.$store.dispatch('getAllDepartment');
- // 用户列表
- this.getUserList();
- let department_id = this.$route.query.department_id;
- this.department_id = (department_id == undefined ? 0 : parseInt(department_id, 10));
- // 获取 localstorage 存储的 pagination 的数据, 并调用函数
- this.currentPage = Number(localStorage.getItem('pagination')) || 1; // 如果 pagination 存在就取 pagination, 否则取 1
- this.handleCurrentChange(this.currentPage);
- },
- // 在 dom 更新之前, 设置 pagination
- beforeUpdate () {
- // 将当前页码存储在 localstorage
- localStorage.setItem('pagination', this.currentPage);
- },
- // 实例销毁之前, 将 pagination 重置为 1
- beforeDestroy () {
- localStorage.setItem('pagination', '1');
- },
- }
- </script>
来源: http://www.qdfuns.com/note/46360/d01d2012977e5d8ceb74ed798fe8a806.html