Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題

更新時(shí)間：2022年10月25日 11:26:33 作者：LitongZero

這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1. 使用場景

一級頁面為列表，列表中，每個(gè)item中，有按鈕，點(diǎn)擊按鈕，跳轉(zhuǎn)到新頁面中，并且顯示剛剛選中的item的所有信息(增、改)。

如下：點(diǎn)擊權(quán)限，進(jìn)入新頁面，并對當(dāng)前角色進(jìn)行權(quán)限改動(dòng)。

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)識地址后面跟一個(gè)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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue修改滾動(dòng)條樣式的方法
這篇文章主要介紹了vue修改滾動(dòng)條樣式,首先要知道，修改滾動(dòng)條樣式，利用偽元素-webkit-scrollbar。下面來看看文章內(nèi)容的具體實(shí)現(xiàn)吧
2021-11-11
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
vite vue3 路由配置@找不到文件的問題及解決
在Vite項(xiàng)目中配置路由時(shí),可能會遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過正確配置,可以確保路由正確加載對應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問題
2024-10-10
vue2封裝input組件方式(輸入的雙向綁定)
這篇文章主要介紹了vue2封裝input組件方式(輸入的雙向綁定)，具有很好的參考價(jià)值，希望對大家有所幫助。
2023-04-04
Vue前端表格導(dǎo)出Excel文件的圖文教程
我們在開發(fā)的時(shí)候會經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue前端表格導(dǎo)出Excel文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
淺析vue-router原理
這篇文章主要圍繞Vue的SPA單頁面設(shè)計(jì)展開。SPA(single page application):單一頁面應(yīng)用程序，有且只有一個(gè)完整的頁面，對vue router原理感興趣的朋友跟隨小編一起看看吧
2018-10-10
vue前端測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
Vue3 reactive響應(yīng)式賦值頁面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下
2024-03-03
vue中銷毀定時(shí)器的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時(shí)器的幾種解決方案,銷毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下
2023-08-08