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)文章
vue.js 圖片上傳并預(yù)覽及圖片更換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js 圖片上傳并預(yù)覽及圖片更換功能,小編主要圍繞我們?nèi)粘J褂霉δ艿睦幼鲋v解,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼
本篇文章主要介紹了vue中用H5實(shí)現(xiàn)文件上傳的方法實(shí)例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法,需要的朋友參考下吧2017-10-10解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯亂問題
這篇文章主要介紹了解決Vue的文本編輯器 vue-quill-editor 小圖標(biāo)樣式排布錯亂問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08關(guān)于實(shí)現(xiàn)Vue3版抖音滑動插件踩坑指南
這篇文章主要給大家介紹了關(guān)于實(shí)現(xiàn)Vue3版抖音滑動插件踩坑指南,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02vue2項(xiàng)目中如何使用clipboard復(fù)制插件
這篇文章主要介紹了vue2項(xiàng)目中如何使用clipboard復(fù)制插件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07