欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題

 更新時間：2022年10月25日 11:26:33   作者：LitongZero  
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1. 使用場景

一級頁面為列表，列表中，每個item中，有按鈕，點(diǎn)擊按鈕，跳轉(zhuǎn)到新頁面中，并且顯示剛剛選中的item的所有信息(增、改)。

如下：點(diǎn)擊權(quán)限，進(jìn)入新頁面，并對當(dāng)前角色進(jìn)行權(quán)限改動。

2. 開發(fā)環(huán)境

  • 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
}

重點(diǎn)為/:id(\\d+)，標(biāo)識地址后面跟一個id。

4. 設(shè)置跳轉(zhuǎn)

兩種方法

1.編程式跳轉(zhuǎn)

調(diào)用

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

聲明

handlePermission(row) {
  /**
   * TODO 權(quán)限配置頁面跳轉(zhuǎn)
   */
  this.$router.push({ path: `/system/role/permission/${row.id}` })
}

2.聲明式跳轉(zhuǎn)

直接調(diào)用

<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. 新頁面接收使用參數(shù)

<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>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論