分销微信小程序开发_vue路由

发布时间:2021-01-07 14:55 作者:jianzhan

摘要: vue路由器--网址导航作用详细说明 本文关键详细介绍了vue路由器--网址导航作用详细说明,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参

vue路由--网站导航功能详解       这篇文章主要介绍了vue路由--网站导航功能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

5、在path指向为“/”的页面中,定义页面的布局,例如:上(头部)-中(左道航-右内容)-下(底部)。

 HeaderSection /HeaderSection 
 div 
 NavList /NavList 
 router-view /router-view 
 /div 
 FooterSection /FooterSection 

6、左侧导航,用elementUI实现,有一个NavMenu导航菜单,做导航功能。

在这里提一下引入elementUI:

(1)安装

npm i element-ui -S

(2)使用

在main.js中加入下面的代码:

import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

导航栏的代码如下:

 el-menu :default-active="onRoutes" :colla凡科抠图e="colla凡科抠图e" background-color="#324157"
 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router 
 template v-for="item in items" 
 template v-if="item.subs" 
 el-submenu :index="item.index" :key="item.index" 
 template slot="title" 
 i : /i span slot="title" {{ item.title }} /span 
 /template 
 template v-for="subItem in item.subs" 
 el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index" 
 template slot="title" {{ subItem.title }} /template 
 el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index" 
 {{ threeItem.title }}
 /el-menu-item 
 /el-submenu 
 el-menu-item v-else :index="subItem.index" :key="subItem.index" 
 {{ subItem.title }}
 /el-menu-item 
 /template 
 /el-submenu 
 /template 
 template v-else 
 el-menu-item :index="item.index" :key="item.index" 
 i : /i span slot="title" {{ item.title }} /span 
 /el-menu-item 
 /template 
 /template 
 /el-menu 

定义左侧导航的显示和图标等内容,index为唯一标识,打开的是path路径,对应router中的path,就可以打开写好的相应的页面。

items: [
 icon: 'el-icon-share',
 index: 'user',
 title: '系统首页'
 icon: 'el-icon-time',
 index: 'profile',
 title: '基础表格'
 icon: 'el-icon-bell',
 index: '3',
 title: '表单相关',
 subs: [
 index: 'form',
 title: '基本表单'
 index: '3-2',
 title: '三级菜单',
 subs: [
 index: 'detail',
 title: '富文本编辑器'
 index: 'file',
 title: 'markdown编辑器'
 index: 'profiles',
 title: '文件上传'
 ]

7、如果涉及到登录页面和不需要路由的页面等,就需要在router的js文件中定义和“/”平级的其他path的页面,再判断进入页面是路由页面还是登录等页面。

以上所述是小编给大家介绍的vue路由--网站导航功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


  • 阿里巴巴云轻量运用网络

    模拟题目:阿里巴巴巴巴云轻量应用互联网网络服务器价格表(收费标准规范标准) 阿里巴巴巴巴云轻量应用互联网网络服务器分为按流量包收费标准套餐内容內容和按固定不动没动互

  • 百度搜索、今天今日头条

    原题目:百度搜索、今天今日头条、网易游戏、腾迅、B站等好几家涉未满十八岁人到线学习培训网站服务平台被抓处 当今,学习培训文化教育类网站服务平台和APP已是为未满十八岁人

  • H5直播间技术性你了解吗?

    原题目:H5直播间技术性你了解吗?H5直播间计划方案剖析解读 17年视頻直播间可以说是火灾,各种各样视頻直播间服务平台相继出场,H5直播间也慢慢完善,今日就来说解H5视頻直播间

  • GitHub上这些非常值得一试

    模拟题目:GitHub上这种十分非常值得一试的Java开源系统系统软件库 作为一名程序员,你大部分每天全是运用到GitHub上的这种著名Java第三方库,比如Apache Commons,Spring,Hibernate这种。除开

  • 公司手机上网站创建怎样

    原题目:公司手机上网站创建怎样恰当提升丨内蒙古古seo建网站 伴随着时期的发展趋势,当代大家越来越越依靠于手机端机器设备,大家的检索习惯性刚开始转变,繁杂的电脑上端网站