路由配置如下
路由.png
/main是一个非登录的首页,主要功能就是有四个菜单选项,点击进入相应的子页面,
main页面.png
这些子页面都有共同的头部和侧边栏,所以归类到/home这个路由下,main.js需要配置一下项目一打开进入的是/main页面
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