Vue-admin-template 新增、跳轉子頁面問題

2022-10-26 14:01:40

1. 使用場景

一級頁面為列表，列表中，每個item中，有按鈕，點選按鈕，跳轉到新頁面中，並且顯示剛剛選中的item的所有資訊(增、改)。

如下：點選許可權，進入新頁面，並對當前角色進行許可權改動。

2. 開發環境

Vue-admin-template
element-ui: “2.4.6”
vue: “2.5.17”
vue-router: “3.0.1”
vuex: “3.0.1”

3. 設定路由

{
  path: 'role/permission/:id(\d+)',
  name: 'PermissionConfig',
  component: () => import('@/views/system/role/permission/index'),
  meta: { title: 'permissionConfig', icon: 'table' },
  hidden: true
}

重點為/:id(\d+)，標識地址後面跟一個id。

4. 設定跳轉

兩種方法

1.程式設計式跳轉

呼叫

<el-button size="mini" type="success" @click="handlePermission(scope.row)">{{ $t('role.permission') }}</el-button>

宣告

handlePermission(row) {
  /**
   * TODO 許可權設定頁面跳轉
   */
  this.$router.push({ path: `/system/role/permission/${row.id}` })
}

2.宣告式跳轉

直接呼叫

<router-link :to="'/system/role/permission/'+scope.row.id">
  <el-button type="primary" size="small" icon="el-icon-edit">Edit</el-button>
</router-link>

5. 新頁面接收使用引數

<template>
  <div>
    {{ this.$route.params }}
    {{ this.$route.params.id }}
  </div>
</template>

<script>
export default {
  name: 'PermissionConfig',
  data() {
    return {
      id: '',
      list: []
    }
  },
  created() {
    this.id = this.$route.params.id
    this.a()
  },
  methods: {
    a() {
      console.log(this.id)
    }
  }
}
</script>

<style scoped>

</style>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。