Vue-admin-template 添加、跳转子页面问题

 更新时间:2022年10月25日 11:26:33   作者:LitongZero  
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue异步更新机制及$nextTick原理的深入讲解

    Vue异步更新机制及$nextTick原理的深入讲解

    最近在学习一些底层方面的知识,所以想做个系列尝试去聊聊这些比较复杂又很重要的知识点,下面这篇文章主要给大家介绍了关于Vue异步更新机制及$nextTick原理的相关资料,需要的朋友可以参考下
    2022-04-04
  • 使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

    这篇文章主要介绍了使用VUE+SpringBoot+EasyExcel 整合导入导出数据的过程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • 前端主流框架vue学习笔记第一篇

    前端主流框架vue学习笔记第一篇

    一步一步学Vue,这篇文章为大家分享了第一篇前端主流框架vue学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • VUE中watch的详细使用教程(推荐!)

    VUE中watch的详细使用教程(推荐!)

    这篇文章主要给大家介绍了关于VUE中watch的详细使用教程,watch是vue实例的一个属性,主要用来监听数据的变化,并做出一些操作,需要的朋友可以参考下
    2023-08-08
  • 详解如何在Electron中存取本地文件

    详解如何在Electron中存取本地文件

    在Electron 中,存取本地文件,有很多种办法,本文介绍最常用的一种办法, 通过 Electron 框架提供的能力,和 Node.js 的 fs 文件管理模块实现本地文件的存取,需要的小伙伴可以参考下
    2023-11-11
  • vue3 自定义指令详情

    vue3 自定义指令详情

    这篇文章主要介绍了 vue3 自定义指令详情,自定义指令分为全局和局部两种类型,大家并不陌生。今天我们就讲讲在 vue3 中,自定义指令定义、使用以及钩子函数都有哪些变化?,需要的朋友可以参考一下
    2021-11-11
  • 解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    解决vue项目中前后端交互的跨域问题、nginx代理配置方式

    这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue计时器的用法详解

    Vue计时器的用法详解

    这篇文章主要为大家详细介绍了Vue计时器的用法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法,非常不错,具有参考借鉴价值,,需要的朋友可以参考下
    2017-02-02
  • vue-upload上传图片详细使用方法

    vue-upload上传图片详细使用方法

    这篇文章主要介绍了使用vue-upload上传图片的详细使用说明,文中有相关的代码示例供大家参考,感兴趣的小伙伴一起跟着小编来学习吧
    2023-05-05

最新评论