路由配置如下
路由.png
/main是一個(gè)非登錄的首頁(yè)，主要功能就是有四個(gè)菜單選項(xiàng)，點(diǎn)擊進(jìn)入相應(yīng)的子頁(yè)面，
main頁(yè)面.png
這些子頁(yè)面都有共同的頭部和側(cè)邊欄，所以歸類到/home這個(gè)路由下，main.js需要配置一下項(xiàng)目一打開(kāi)進(jìn)入的是/main頁(yè)面
home.jpg
router.beforeEach((to, from, next) => {
if (to.path === '/') {
next({ path: '/main' })
} else {
next()
}
})
以下是/home側(cè)欄的寫(xiě)法
// 左邊導(dǎo)航菜單
<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小白摸索中，這只是一個(gè)記錄，歡迎指正，嘻嘻~
OVER
