【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）：

<router-link target="_blank" :to="{path:'./detail',query:{id: "2"}}">跳转1</router-link>

//detail.vue 获取参数
let tmpID = this.$route.query.id

四、总结：

还有其他很多跳转方法后续用到了再补