132°

关于element ui 的路由跳转页面的问题

写的比较乱,方便以后自己来复制

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
         router
>
element ui 导航跳转页面
:default-active="" 默认显示页面   @select  点击导航的回调       router路由模式 官网是这样解释的
<el-menu-item index="/pageHome/HardwareMonitor">处理中心</el-menu-item>
<el-submenu index="2">
  <template slot="title">我的工作台</template>
  <el-menu-item index="/pageHome/HardwareMonitor1">选项1</el-menu-item>
  <el-menu-item index="2-2">选项2</el-menu-item>
  <el-menu-item index="2-3">选项3</el-menu-item>
  <el-submenu index="2-4">
    <template slot="title">选项4</template>
   <el-menu-item index="2-4-1">选项1</el-menu-item>
    <el-menu-item index="2-4-1">选项2</el-menu-item>
    <el-menu-item index="2-4-3">选项3</el-menu-item>
  </el-submenu>
</el-submenu>

只有再el-menu中设置这个才能以index来跳转   这个是基于element的比较简单的跳转方式了,还有别的就是通过把页面注册成组件来进行跳转的,或者是用router-link 中的
to 里面设置跳转路径 

index.js中设置子路由

export default new Router({
  mode:'history',//设置之后地址栏会去掉 # 号
  routes: [
    {
      path:'/',
      name:'login',
      component: resolve => require(['../views/login'],resolve),
      },
    {
      path:'/pageHome',
      name:'pageHome',
      component: resolve => require(['../views/pageHome'],resolve),
      children:[
        {
          path:'/',//默认跳转路径
          name:'HardwareMonitor',
          component: resolve => require(['../views/HardwareMonitor'],resolve),
          meta: {requireAuth: true},
        },
        {
          path:'/pageHome/HardwareMonitor',
          name:'HardwareMonitor',
          component: resolve => require(['../views/HardwareMonitor'],resolve),
          meta: {requireAuth: true},
        },
        {
          path:'/pageHome/HardwareMonitor1',
          name:'HardwareMonitor1',
          component: resolve => require(['../views/HardwareMonitor1'],resolve),
          meta: {requireAuth: true},
        }
      ]
    },
  ]
})
至于为什么再app.vue中设置了router-view  然后又在首页里面设置router-view 他是怎么选择跳转的,大致百度了下,说是通过children先到app再到首页,对不对咱现
在也不知到,毕竟不是专业前端。。。。先会用,至于理解透彻,以后再说吧

 

本文由【久伴诗与远方】发布于开源中国,原文链接:https://my.oschina.net/u/3774949/blog/3158048

全部评论: 0

    我有话说: