介绍 npm install vue-router ——save-dev import Vue 得到& # 39;vue # 39;
import Router 得到& # 39;vue-router& # 39;,
Vue.use(路由器),//,引入路由 & lt; template>
,& lt; div>
直才能属下线代理查询
,& lt;/div>
& lt;/template> agencySet & lt; template>
,& lt; div>
直才能属下线代理设置
,& lt;/div>
& lt;/template> financialIncome & lt; template>
,& lt; div>
,,财务收益数据报表
,& lt;/div>
& lt;/template> //4.1引入组件
import Vue 得到& # 39;vue # 39;
import Router 得到& # 39;vue-router& # 39;
import Home 得到& # 39;@/组件/回家# 39;,//,主页
import agencySearch 得到& # 39;@/组件/agencySearch& # 39;,//,直属下线代理查询
import agencySet 得到& # 39;@/组件/agencySet& # 39;,//,直属下线代理设置
Vue.use(路由器)//搭配路由
export default new 路由器({
模式:大敌;& # 39;历史# 39;
,scrollBehavior:(),=祝辞,({
,y: 0
}),
,路线:[
,{//才能,主页
,,路径:& # 39;/& # 39;
组件:,才能回家,
,,名字:& # 39;代理事物& # 39;,
,,iconCls: & # 39; el-icon-message& # 39;
,,孩子们:[{
,,路径:& # 39;/agencySearch& # 39;
,,组件:agencySearch,
,,名字:& # 39;直属下线代理查询& # 39;,
隐藏的才能:真实
,,},
{才能
,,路径:& # 39;/agencySet& # 39;
,,组件:agencySet,
,,名字:& # 39;直属下线代理设置& # 39;
})才能
},
,{//才能,主页
,,路径:& # 39;/& # 39;
组件:,才能回家,
,,名字:& # 39;财务报表& # 39;,
,,iconCls: & # 39; el-icon-menu& # 39;
,,孩子们:[{
,,路径:& # 39;/financialIncome& # 39;
,,组件:financialIncome,
,,名字:& # 39;财务收益数据报表& # 39;,
隐藏的才能:真实
})才能
,}]
}) & lt; el-row 类=皌ac"比;
,& lt; el-col :跨度=?4“比;
& lt; el-menu
default-active才能=?”;
类才能=癳l-menu-vertical-demo"
unique-opened 才能;
router>才能;
& lt;才能el-submenu 指数=?“比;
& lt;才能template 槽=皌itle"比;
,,& lt;小姐:类=癳l-icon-message"祝辞& lt;/i>
,,& lt; span>代理事务& lt;/span>
& lt;才能/template>
& lt;才能el-menu-item-group>
& lt;才能template 槽=皌itle"祝辞& lt;/template>
& lt;才能el-menu-item 指数=?agencySearch"在直属下线代理查询& lt;/el-menu-item>
& lt;才能el-menu-item 指数=?agencySet"在直属下线代理设置& lt;/el-menu-item>
& lt;才能/el-menu-item-group>
& lt;才能/el-submenu>
& lt;才能el-submenu 指数=?“比;
& lt;才能template 槽=皌itle"比;
,,& lt;小姐:类=癳l-icon-menu"祝辞& lt;/i>
,,& lt; span>财务报表& lt;/span>
& lt;才能/template>
& lt;才能el-menu-item-group>
& lt;才能template 槽=皌itle"祝辞& lt;/template>
& lt;才能el-menu-item 指数=?financialIncome"在财务收益数据报表& lt;/el-menu-item>
& lt;才能/el-menu-item-group>
& lt;才能/el-submenu>
,& lt;/el-menu>
,& lt;/el-col>
& lt;/el-row>
这篇文章将为大家详细讲解有关vue如何实现侧边栏导航效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>最终效果
点击下一个导航,上一个导航自动收回
<强>实现代码
<强> 1。下载vue-router
<强> 2。在主要。js中引入
<强> 3。在组件中新建组件
3.1 agencySearch。vue组件
代码:
3.2。vue组件
代码
3.3。vue组件
代码
<强> 4。在路由器下的指数。js中引入组件,搭配路由
<强> 5。在主页家组件中搭配导航以及路由出口
在el-menu标签中一定要有unique-opened和路由器属性,在el-menu-item中指数属性值等于在路由器下指数。js中配好的路由名字
这个是官从元素网截取的
