最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程
element-ui引入vue项目的用法参考<强>元素官网
首先复制官网的例子,在这基础上再修改成我们想要的样子。
& lt; el-menu: default-active=癮ctiveIndex”类=癳l-menu-demo”模式=昂嵯颉盄select=癶andleSelect”比;
& lt; el-menu-item指数=?”在处理中心& lt;/el-menu-item>
& lt; el-submenu指数=?”在
& lt;模板槽="标题"在我的工作台& lt;/template>
& lt; el-menu-item指数=? - 1”在选项1 & lt;/el-menu-item>
& lt; el-menu-item指数=" 2 "祝辞选项2 & lt;/el-menu-item>
& lt; el-menu-item指数=? - 3”的在选项3 & lt;/el-menu-item>
& lt; el-submenu指数=? - 4”比;
& lt;模板槽="标题"祝辞选项4 & lt;/template>
& lt; el-menu-item指数=" 2-4-1 "在选项1 & lt;/el-menu-item>
& lt; el-menu-item指数=" 2-4-2 "在选项2 & lt;/el-menu-item>
& lt; el-menu-item指数=" 2-4-3 "在选项3 & lt;/el-menu-item>
& lt;/el-submenu>
& lt;/el-submenu>
& lt; el-menu-item指数=?”disabled>消息中心& lt;/el-menu-item>
& lt; el-menu-item指数=" 4 "祝辞& lt; a href=" https://www.ele.me " rel==捌降取薄巴獠縩ofollow”目标在订单管理& lt;/a> & lt;/el-menu-item>
& lt;/el-menu>
& lt; script>
出口默认{
数据(){
返回{
activeIndex: ' 1 '
};
},
方法:{
handleSelect(关键,keyPath) {
控制台。日志(关键,keyPath);
}
}
}
& lt;/script>
之前
<强>属性:
* default-active:表示当前活跃的菜单项的编号
*指数:类型为字符串,在每一个el-menu-item组件上都有一个编的号,给default-active标记
<强>使用菜单栏进行路由跳转:
& lt; el-menu: default-active=" $路由器。路径”路由器模式="水平"比;
& lt; el-menu-item v="(我)项目,在navList”:关键=拔摇?指数=癷tem.name”比;
{{项目。navItem}}
& lt;/el-menu-item>
& lt;/el-menu>
<强>数据:
数据(){
返回{
navList:(
{名称:'/findProject ', navItem:“发现项目”},
{名称:'/communityActivity ', navItem:“社区动态”},
{名称:'/publishProject ', navItem:“发布项目”},
{名称:'/personalCenter ', navItem:“个人中心”},
{名称:'/manageCenter ', navItem:“管理员中心”},
]
}
}
<>强路由:
出口默认新路由器({
路线:[{
路径:“*”,
重定向:‘/findProject’
},{
路径:/findProject,
名称:“findProject”,
组件:findProject
},{
路径:/communityActivity,
名称:“communityActivity”,
组件:communityActivity
},{
路径:/publishProject,
名称:“publishProject”,
组件:publishProject
},{
路径:/personalCenter,
名称:“personalCenter”,
组件:personalCenter
},{
路径:/manageCenter,
名称:“manageCenter”,
组件:manageCenter
})
})
1。在el-menu加上路由器
2。指数必须绑定路由的路径,参考上面的例子,‘/荒苌?/p>
3。default-active设为当前路由(这一点。router.path美元),这样在路由变化的时候,对应的菜单项的才会高亮。
公司的项目使vue脚用手架来搭建,是属于后台管理系统。功能页比较多,就使用vue路由来进行跳转;
个人比较习惯上面这种方式放置路由文件,并且使用懒加载的模式来配置,如下:
从“Vue”进口Vue
从“vue-router”进口路由器//导入登录“. .//视图/login.vue’。//导入NotFound“. .//视图/404. vue’。//导入从“. .//视图/index.vue’。
Vue.use(路由器)
出口默认新路由器({
模式:'历史',//去掉#号
路线:[
{
路径:/登录,
名称:“登录”,
组件:解决=比;要求(“. ./视图/login.vue”,解决)
},
{
路径:/404,
名称:“NotFound”,
组件:解决=比;要求([' . ./视图/404. vue '],解决)
},
{
路径:“/?
重定向:“/违约”
},
{
路径:“/?
名称:“回家”,
组件:解决=比;要求(“. ./视图/index.vue”,解决),
元:{标题:“自述文件的},
孩子:(
{
路径:/违约,
组件:解决=比;要求(“. ./组件/default.vue”,解决),
元:{标题:“系统首页'}
},
{
路径:/组,
组件:解决=比;要求(“. ./组件/set.vue”,解决),
元:{标题:设置的}
},
{
路径:/用户,
组件:解决=比;要求(“. ./组件/user.vue”,解决),
元:{标题:“账户管理'}
},
{
路径:/成员,
组件:解决=比;要求([' . ./组件/memberList/memberList.vue '],解决),
元:{标题:“会员列表'}
},
{
路径:/baseCharts,
组件:解决=比;要求([' . ./组件/图表/baseCharts.vue '],解决),
元:{标题:“会员分析'}
}
]
}
]
})
