路由配置如下

路由.png

/main是一个非登录的首页，主要功能就是有四个菜单选项，点击进入相应的子页面，

main页面.png

home.jpg

router.beforeEach((to, from, next) => {
  if (to.path === '/') {
    next({ path: '/main' })
  } else {
    next()
  }
})

以下是/home侧栏的写法

// 左边导航菜单
  <div class="side-bar">
    <div class="side-list">
        <div :default-active="$route.router" class="menu-demo" router>
          <div v-for="item in $router.options.routes[2].children" class="nav-list"
          :key="item.id"
          :class="$route.path.indexOf(item.path) >= 0 ?'is-active':''"
          @click="$router.push(item.path)">
            <div :index="item.path" class="rt-link">
              <i :class="item.iconCls"></i>
              <h4> {{ item.name }}</h4>
            </div>
          </div>
        </div>
    </div>
  </div>

Vue小白摸索中，这只是一个记录，欢迎指正，嘻嘻~
OVER