元素用户界面使用导航栏跳转路由的用法详解

最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程

元素用户界面引入某视频剪辑软件项目的用法参考元素官网

首先复制官网的例子，在这基础上再修改成我们想要的样子。

El-menu :默认-活动='活动索引'类=' El-menu-demo '模式='水平' @选择='手柄选择' El-菜单项索引=' 1 '处理中心/El-菜单项埃尔-子菜单索引='2 '模板槽='标题'我的工作台/模板El-菜单项索引='2-1 '选项1/El-菜单项埃尔-菜单项索引='2-2 '选项2/El-菜单项埃尔-菜单项索引='2-3 '选项3/El-菜单项埃尔-子菜单索引='2-4 '模板槽='标题'选项4/模板埃尔-菜单项索引='2-4-1 '选项1/El-菜单项埃尔-菜单项索引='2-4-2 '选项2/El-菜单项埃尔-菜单项索引='2-4-3 '选项3/El-菜单项/El-子菜单/El-子菜单埃尔-菜单项索引='3 '已禁用消息中心/El-菜单项El-菜单项索引=' 4 ' a href=' https://www。埃勒。me ' rel='外部无跟随' target=' _ blank '订单管理/a/El-菜单项/El-菜单脚本导出默认值{ data(){ return { active index : ' 1 ' }；}，methods: { handleSelect(键，键路径){ console.log(键，键路径);} } }/脚本属性：

*默认-活动：表示当前活跃的的菜单项的编号*索引：类型为字符串，在每一个埃尔菜单项组件上都有一个编号，给默认激活标记

使用菜单栏进行路由跳转：

El-menu :默认-激活='这.$路由器。路径'路由器模式='水平' El-菜单项v-for='(项，I)在NavList ' :键=' I ' :索引=' item。名称“{ item。导航项目菜单数据：

data(){ return { nav list :[{ name : '/find project '，navItem: '发现项目}，{name:'/communityActivity '，navItem: '社区动态}，{name:'/publishProject '，navItem: '发布项目}，{name:'/personalCenter '，navItem: '个人中心}，{name:'/manageCenter '，navItem: '管理员中心'}, ] } }路由：

导出默认的新路由器({ routes: [{ path: '*，redirect: '/findProject' }，{ path: '/findProject '，名称： 'findProject '，组件： ' find project ' }，{ path: '/communityActivity '，名称： 'communityActivity '，组件3: ' community activity ' }，{ path 3333: '/publish project '，名称33: ' publish project '，组件使用菜单栏进行路由跳转有几个注意点：

1.在埃尔菜单加上路由器

2.指数必须绑定路由的路径，参考上面的例子，'/'不能少

3.默认激活设为当前路由（这个$router.path)，这样在路由变化的时候，对应的菜单项才会高亮。

拓展知识：vue项目中的路由配置方法

公司的项目使用某视频剪辑软件脚手架来搭建，是属于后台管理系统。功能页比较多，就使用某视频剪辑软件路由来进行跳转；

个人比较习惯上面这种方式放置路由文件，并且使用懒加载的模式来配置，如下：

从vue '导入某视频剪辑软件从vue-路由器“/导入路由器/从'导入登录名'././查看/登录。vue '/import NOt Found from '././view/404。vue//从导入主页'././view/index。呜呜呜。使用(路由器)导出默认的新路由器({ mode: 'history '，//去掉#号routes: [ { path: '/login '，名称： 'Login '，组件： resolve=require(['./查看/登录。vue ']，resolve) }，{ path: '/404 '，name: 'NotFound '，组件： resolve=require(['./view/404。vue ']，resolve) }，{ path: '/'，redirect: '/default' }，{ path: '/'，name: 'Home '，组件： resolve=require(['./view/index。vue ']，resolve)，meta: {title: '自述文件}，子项：[{ path : '/default '，组件： resolve=require(['./components/default.vue']，resolve)，meta: {title: '系统首页} }，{ path: '/set '，组件： resolve=require(['./components/set.vue']，resolve)，meta: { title: '设置} }，{ path: '/user '，组件： resolve=require(['./components/user.vue']，resolve)，meta: {title: '账户管理} }，{ path: '/member '，组件： resolve=require(['./components/MemberList/MemberList。vue ']，resolve)，meta: {title: '会员列表} }，{ path: '/baseCharts '，组件： resolve=require(['./组件/图表/基础图表。vue ']，resolve)，meta: {title: '会员分析'} } ] } ]})在main.js中使用路由进行配置：

这样就可以在需要的地方使用路由了。

以上这篇元素用户界面使用导航栏跳转路由的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。