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 相关文章推荐
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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的网址
2006/11/25 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
DEFER怎么用?
2006/07/01 Javascript
js同源策略详解
2015/05/21 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python模块的加载讲解
2019/01/15 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
求职简历中自我评价
2014/01/28 职场文书
个人课题方案
2014/05/08 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2014年新教师工作总结
2014/11/08 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
如何利用python创作字符画
2022/06/25 Python