vue路由跳转及element导航跳转相关问题

一、点击登录按钮跳转相应界面

①首先在router.js(vue2版本好像是在router文件夹下的index.js中)中配置你要跳转界面的路由相关信息

如：

{

　　path : '/index',  //这个是路由地址，也就是浏览器上面的url

　　name : 'index',

　　component : () => import('./views/main/index')  //这个是你界面存放的路径

}

②在登录按钮中加入

this.$router.push({path: '/index'});  //与你配置的路由地址保持一致

 

二、element左侧导航菜单menu收缩/展开时，让右侧的main跟着左侧的进行变化

 

设置 <el-aside> 的宽度   :width = "isCollapse ? '' : '200px' " ，其中isCollapse为 <el-menu> 标签 collapse绑定的值，true/false。

 

三、element左侧导航菜单跳转相应的界面

 

①设置 <el-menu> 标签的 router 属性为true

②配置router.js中的路由地址与第一个大致相同，不过记得配置redirect属性，redirect : '/index/system'，让系统会默认进入一个界面

③设置 <el-menu> 标签 default-active = '/index/system'，让这个默认界面的菜单高亮

④配置<el-menu-item>中的index为你设置的路由

 

贴上代码

 

router.js部分

index.vue界面部分

 

 

 

 

转载于:https://www.cnblogs.com/pipim/p/11395629.html