H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue+elementUI+vueRouter

 <el-menu :default-active="$route.path" theme="dark" unique-opened router>
                <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
                    <el-submenu :index="index">
                      <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
                      <el-menu-item v-for="(child,index) in item.children" :index="child.path">{{child.name}}</el-menu-item>
                 </el-submenu>    
                </template> 
           </el-menu>
           
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Collapse from '@/components/collapse/Collapse'
import Radio from '@/components/radio/Radio'
import Checkbox from '@/components/checkbox/Checkbox'
import Slider from '@/components/slider/Slider'
import NavMenu from '@/components/navMenu/NavMenu'
import NavMenuRouter from '@/components/navMenu/NavMenuRouter'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      hidden: true
    },
    {
      path: '/navMenu/NavMenuRouter',
      name: 'Radio',
      component: NavMenuRouter,
      iconCls: 'el-icon-message',
      children: [
        { path: '/radio/Radio', component: Radio, name: 'Radio' }
      ]
    },
    {
      path: '/navMenu/NavMenuRouter',
      name: 'Collapse',
      component: NavMenuRouter,
      iconCls: 'el-icon-document',
      children: [
        { path: '/collapse/demoCollapse', component: Collapse, name: 'Collapse' }
      ]
    },
    {
      path: '/navMenu/NavMenuRouter',
      name: 'Checkbox',
      component: NavMenuRouter,
      iconCls: 'el-icon-warning',
      children: [
        { path: '/checkbox/Checkbox', component: Checkbox, name: 'Checkbox' }
      ]
    },
    {
      path: '/navMenu/NavMenuRouter',
      name: 'Slider',
      component: NavMenuRouter,
      iconCls: 'el-icon-star-on',
      children: [
        { path: '/slider/Slider', component: Slider, name: 'Slider' }
      ]
    },
    {
      path: '/navMenu/NavMenuRouter',
      name: 'NavMenu',
      component: NavMenuRouter,
      iconCls: 'el-icon-edit',
      children: [
        { path: '/navMenu/NavMenu', component: NavMenu, name: 'NavMenu' }
      ]
    }
  ]
})

图片描述
如何设置其中一项默认展开啊?default-active=”$route.path” 这里的$route.path 是什么啊,大神帮忙解释下 $route.path $router.options.routes这两个怎么解释

回答:

$route.path 就是当前路由的路径,在你的路由表里面配置path的值。
至于options 没有找到这个属性,我用的2.0,不知道你的版本。

clipboard.png
这是我打印的$route。
我猜你是想了解这个属性

clipboard.png

本文地址:H5W3 » vue+elementUI+vueRouter

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址