一、前言:
除了常规的通过标签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
四、总结:
还有其他很多跳转方法后续用到了再补