【Abp VNext】實戰入門（五）：【9】前端管理界面 vue-element-admin —— Router路由跳轉及參數傳遞

一、前言：

除了正常的通過标簽link形式跳轉頁面的方法，vue-element-admin 項目中已經自帶路由封裝，可以在代碼中手動控制頁面路徑跳轉， 通常隻需要知道如何跳轉頁面，如何傳遞參數即可。

配合底層路由攔截功能，參考：【Abp VNext】實戰入門（五）：【2】前端管理界面 vue-element-admin —— 路由攔截優化改造

二、必須的頁面路徑申明配置：

描述：所有頁面要進行展示都必須先在路由頁面中先行聲明（名稱、路徑…）

1、在根目錄router/index.js 中配置寫好的vue頁面：

2、簡單聲明頁面不在菜單顯示：

這種頁面打開後不帶左邊菜單、不帶頂部導航欄、全屏顯示

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true //隐藏申明 不在菜單中顯示
  },
           

類似于這樣：

3、一級菜單聲明：

{
    path: '/device',//通路主路徑如：http://localhost:9528/#/device
    name: '監控首頁',//貌似每個卵用 要不要都不影響
    component: Layout, //頁面采用 架構模闆 打開後自帶左側菜單 頂部導航欄
    redirect: '/device/index', //打開主路徑後預設跳轉index.vue頁面：http://localhost:9528/#/device/index 
    meta: { title: '監控首頁',  //左側一級菜單标題
    		icon: 'el-icon-s-help'  //一級菜單圖示
    	  },
    children: [{ //一級菜單下面的二級菜單可以有多個
      path: 'index', //二級菜單路徑 device/index 就是這麼來的 
      name: 'index', //名稱 也沒什麼卵用
      component: () => import('@/views/device/index'), //二級菜單的絕對實體路徑
      meta: { title: '系統首頁', icon: 'dashboard' }//二級菜單名字、圖示
    }]
  },
           

界面效果：

4、多級菜單申明：

{
    path: '/device',//通路主路徑如：http://localhost:9528/#/device
    name: '監控首頁',//貌似每個卵用 要不要都不影響
    component: Layout, //頁面采用 架構模闆 打開後自帶左側菜單 頂部導航欄
    redirect: '/device/index', //打開主路徑後預設跳轉index.vue頁面：http://localhost:9528/#/device/index 
    meta: { title: '監控首頁',  //左側一級菜單标題
    		icon: 'el-icon-s-help'  //一級菜單圖示
    	  },
    children: [
    { //一級菜單下面的二級菜單可以有多個
      path: 'index', //二級菜單路徑 device/index 就是這麼來的 
      name: 'index', //名稱 也沒什麼卵用
      component: () => import('@/views/device/index'), //二級菜單的絕對實體路徑
      meta: { title: '系統首頁', icon: 'dashboard' }//二級菜單名字、圖示
    },
    { // 一級菜單下面的二級菜單
      path: 'detail',
      name: 'detail',
      component: () => import('@/views/device/detail'),
      meta: { title: '控制頁面', icon: 'form' },
      //hidden: true //如果隐藏了 左側隻顯示 index菜單
    }   ]
  },
           

界面效果：

三、頁面跳轉：

1、簡單跳轉：

//index.vue
const tmpPath = { path: './detail'}
this.$router.push(tmpPath)
this.$router.push('./detail') //一樣的
           

2、帶參數跳轉（1）：

//index.vue
const tmpPath = { path: './detail',query: { id:2 }}
this.$router.push(tmpPath)
this.$router.push('./detail?id=3') //一樣的
           

//detail.vue 擷取參數
  created() {
	let tmpID = this.$route.query.id //注意是this.$route 不是 router 沒有r
    console.log(tmpID )
  },
           

3、帶參跳轉（2）：

//detail.vue 擷取參數
let tmpID = this.$route.query.id
           

四、總結：

還有其他很多跳轉方法後續用到了再補