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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
js函数和this用法实例分析
Mar 13 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
第十四节 命名空间 [14]
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
php输出图像的方法实例分析
2017/02/16 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
javascript的几种写法总结
2016/09/30 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
大学生暑期实践感言
2014/02/26 职场文书
广告宣传策划方案
2014/05/21 职场文书
医学检验专业自荐信
2014/09/18 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
Vue操作Storage本地化存储
2022/04/29 Vue.js
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS