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

目录
  • 1. 使用场景
  • 2. 开发环境
  • 3. 配置路由
  • 4. 设置跳转
    • 两种方法
  • 5. 新页面接收使用参数

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-admin-template模板添加tagsview的实现

    vue-admin-template模板添加tagsview的实现

    目录 一.从vue-element-admin复制文件 二.修改 vue-admin-template\src\layout\components\AppMain.vue 三.修改vue-admin-template\src\layout\components\index.js 四.vue-admin-template\src\layout\index.vue 五.修改 vue-admin-template\src\store\getters.js 六.修改 vue-admin-template

  • Vue实现登陆跳转

    Vue实现登陆跳转

    本文实例为大家分享了Vue实现登陆跳转的具体代码,供大家参考,具体内容如下 不说废话,先上效果图~ 具体的实现方法,参照以下步骤~ 1.创建login.vue,绘制login画面,添加跳转事件. <template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleF

  • 详解使用vue-admin-template的优化历程

    前言 公司有好几个项目都有后台管理系统,为了方便开发,所以选择了 vue 中比较火的后台模板作为基础模板进行开发.但是,开始用的时候,作者并没有对此进行优化,到项目上线的时候,才发现,打包出来的文件都十分之大,就一个 vendor 就有 770k 的体积(下图是基础模板,什么都没加打包后的文件信息): 通过 webpack-bundle-analyzer 进行分析可得,体积主要来源于饿了么UI(体积为 500k),因为没对其进行部分引入拆分组件,导致 webpack 把整个组件库都打包进去了.其

  • Vue 解决父组件跳转子路由后当前导航active样式消失问题

    举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的问题,如下图: style代码: .router-link-exact-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important; } router.js代码

  • vue项目中路由跳转页面不变问题及解决

    目录 vue中路由跳转页面不变 问题 解决方法 路由跳转页面不刷新.this.$router.go(-1)不生效 解决思路 vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变. 解决方法 项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化

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

    目录 1. 使用场景 2. 开发环境 3. 配置路由 4. 设置跳转 两种方法 5. 新页面接收使用参数 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. 配

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • 基于vue开发微信小程序mpvue-docs跳转页面功能

    打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart 跳转页面,废话不多说直接点... 打开pages.js 默认是有两个页面的, 现在新添加一个newpage的页面 这样加就行了! 然后是 用模版上的方法去跳转页面已测试OK, 虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用 总结 以上所述是小编给大家介绍的基于vue开发微信小程序mpvue-docs跳转页面功能,希望对大家有所帮助,如果大家有任何疑问请给我留

  • 基于vue循环列表时点击跳转页面的方法

    1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上

  • vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

  • vue跳转页面常用的4种方法与区别小结

    目录 1:router-link跳转 2:this.$router.push() 3. this.$router.replace() 4. this.$router.go(n) ps:区别 总结 vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下. 1:router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to=

  • vue跳转页面并且实现参数传递接受示例

    vue跳转页面并且实现参数传递接受示例

    目录 一.页面跳转.传递参数 二.接收参数 要实现一个功能:从页面A跳转到页面B,并且页面A的参数要传递到页面B,B使用传过来的参数. 从A到B. 其实就是2步走:1,A传递参数.2,B接受参数. 一.页面跳转.传递参数 在A页面的对应按钮,写上一个方法,点击的时候调用这个方法,进行跳转. # content of A <el-button size="mini" icon="el-icon-zoom-in" @click.native="goto_

随机推荐