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+SpringBoot+EasyExcel 整合导入导出数据的教程详解
这篇文章主要介绍了使用VUE+SpringBoot+EasyExcel 整合导入导出数据的过程详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-05-05解决vue项目中前后端交互的跨域问题、nginx代理配置方式
这篇文章主要介绍了解决vue项目中前后端交互的跨域问题、nginx代理配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-09-09vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法,非常不错,具有参考借鉴价值,,需要的朋友可以参考下2017-02-02
最新评论