vue路由--网站导航功能详解


Posted in Javascript onMarch 29, 2019

1、首先需要按照Vue router支持

npm install vue-router
然后需要在项目中引入:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2、定义router的js文件

import Vue from 'vue'
import Router from 'vue-router'
import User from '../pages/user'
import Home from '../pages/public/home'
import Profile from '../pages/user/profile'
import Form from '../pages/form'
import Detail from '../pages/form/form'
import File from '../pages/form/file'
import Files from '../pages/file'

Vue.use(Router)

export default new Router({
 routes: [
  { path: '/', component:Home,
   children:[
    { path: '/user', component:Profile},
    { path: '/profile', component: User},
    { path: '/form', component: Form},
    { path: '/detail', component: Detail},
    { path: '/profiles', component: Files},
    { path: '/file', component: File}
   ]
  },

  { path: '/login', component:Login},
  { path: '/404', component:Error}
 ] 
})

3、在main.js中引入router

import router from './router'

new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

4、入口页面定义router-view

<div id="app">
 <router-view></router-view>
 </div>

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

<HeaderSection></HeaderSection>
 <div>
  <NavList class="nav"></NavList>
  <router-view class="router"></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 class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" 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 :class="item.icon"></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 :class="item.icon"></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路由--网站导航功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js null,undefined,字符串小结
Aug 21 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jquery获取节点名称
Apr 26 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
浅析JS异步加载进度条
May 05 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 #Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 #Javascript
详解vue项目打包步骤
Mar 29 #Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
Vue项目history模式下微信分享爬坑总结
Mar 29 #Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 #Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 #Javascript
You might like
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
基于python实现复制文件并重命名
2020/09/16 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
企业总经理职责
2014/02/02 职场文书
2014年教师节寄语
2014/08/11 职场文书
六年级语文教学反思
2016/03/03 职场文书