iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue-admin-template 添加、跳转子页面问题
  • 586
分享到

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

摘要

目录1. 使用场景2. 开发环境3. 配置路由4. 设置跳转两种方法5. 新页面接收使用参数1. 使用场景 一级页面为列表,列表中,每个item中,有按钮,点击按钮,跳转到新页面中,

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue-admin-template 添加、跳转子页面问题

本文链接: https://www.lsjlt.com/news/170101.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作