• 因为刚初学Vue.js，暂时遇到以下问题，待之后解决

    • 点击父节点，怎么隐藏显示子节点
    • 点击父节点或子节点，切换li的class="active"
    • iframe怎么自适应高度
  • 思路
    • 这里是通过vue.router进行切换
  • 效果图
  • 代码 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <meta name="description" content="">
    
    <meta name="author" content="">
    
    <link rel="icon" href="../../favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

    <style>
    
        .smail-ul {
    
            list-style-type: none;
    
        }

        .router-view-style {
    
            width: 100%;
    
            height: 100%;
    
        }

        .router-view-iframe-style {
    
            width: 100%;
    
            height: 1280px;
    
        }
    
    </style>
    
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    
    <div class="container-fluid">
    
        <div class="navbar-header">
    
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
    
                    aria-expanded="false" aria-controls="navbar">
    
                <span class="sr-only">Toggle navigation</span>
    
                <span class="icon-bar"></span>
    
                <span class="icon-bar"></span>
    
                <span class="icon-bar"></span>
    
            </button>
    
            <a class="navbar-brand" href="#">Project name</a>
    
        </div>
    
        <div id="navbar" class="navbar-collapse collapse">
    
            <ul class="nav navbar-nav navbar-right">
    
                <li><a href="#">Dashboard</a></li>
    
                <li><a href="#">Settings</a></li>
    
                <li><a href="#">Profile</a></li>
    
                <li><a href="#">Help</a></li>
    
            </ul>
    
            <form class="navbar-form navbar-right">
    
                <input type="text" class="form-control" placeholder="Search...">
    
            </form>
    
        </div>
    
    </div>
    
</nav>

<div class="container-fluid" id="app">
    
    <div class="row">
    
        <div class="col-sm-3 col-md-2 sidebar">
    
            <ul class="nav nav-sidebar">
    
                <li >
    
                    <a href="#">用户管理 <span class="sr-only">(current)</span></a>
    
                    <ul class="smail-ul">
    
                        <li><a href="#">
    
                            <router-link to="/managementUser">管理用户</router-link>
    
                        </a></li>
    
                    </ul>
    
                </li>
    
                <li class="active">
    
                    <a href="#">行程游记管理</a>
    
                    <ul class="smail-ul">
    
                        <li><a href="#">
    
                            <router-link to="/managementTravel">管理游记</router-link>
    
                        </a></li>
    
                    </ul>
    
                </li>
    
                <li>
    
                    <a href="#">攻略计划管理</a>
    
                    <ul class="smail-ul">
    
                        <li><a href="#">
    
                            <router-link to="/managementPlan">管理计划</router-link>
    
                        </a></li>
    
                    </ul>
    
                </li>
    
                <li>
    
                    <a href="#">攻略问答管理</a>
    
                    <ul class="smail-ul">
    
                        <li><a href="#">
    
                            <router-link to="/managementProblem">管理问题</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/managementReply">管理回答</router-link>
    
                        </a></li>
    
                    </ul>
    
                </li>
    
                <li>
    
                    <a href="#">玩转当地管理</a>
    
                    <ul class="smail-ul">
    
                        <li><a href="#">
    
                            <router-link to="/addAttraction">添加景点</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/managementAttraction">管理景点</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/addFood">添加美食</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/managingFood">管理美食</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/addAccommodation">添加住宿</router-link>
    
                        </a></li>
    
                        <li><a href="#">
    
                            <router-link to="/managementAccommodation">管理住宿</router-link>
    
                        </a></li>
    
                    </ul>
    
                </li>
    
            </ul>
    
        </div>
    
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    
            <!--<h1 class="page-header">Dashboard</h1>-->

            <div class="row placeholders">
    
                <!-- 路由出口 -->
    
                <!-- 路由匹配到的组件将渲染在这里 -->
    
                <router-view class="router-view-style">

                </router-view>
    
            </div>
    
        </div>
    
    </div>
    
</div>

</body>
    
<script>

    // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
    //1. 定义（路由）组件
    
    const ManagementUser = {template: '<iframe frameborder="0" class="router-view-iframe-style" src="login.html"></iframe>'}
    
    const ManagementTravel = {template: '<div>Management travel</div>'}
    
    const ManagementPlan = {template: '<div>Management Plan</div>'}
    
    const ManagementProblem = {template: '<div>Management Problem</div>'}
    
    const ManagementReply = {template: '<div>Management Reply</div>'}
    
    const AddAttraction = {template: '<div>Add Attraction</div>'}
    
    const ManagementAttraction = {template: '<div>Management Attraction</div>'}
    
    const AddFood = {template: '<div>Add Food</div>'}
    
    const ManagingFood = {template: '<div>Managing Food</div>'}
    
    const AddAccommodation = {template: '<div>Add Accommodation</div>'}
    
    const ManagementAccommodation = {template: '<div>Management Accommodation</div>'}

    //template: '<div>User{{ $route.params.id}}</div>'

    // 2. 创建 router 实例，然后传 `routes` 配置
    
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    
    const router = new VueRouter({
    
        //定义路由
    
        //每个路由应该映射一个组件。 其中"component" 可以是
    
        //创建路由实例,
    
        routes: [
    
            {path: '/managementUser', component: ManagementUser},
    
            {path: '/managementTravel', component: ManagementTravel},
    
            {path: '/managementPlan', component: ManagementPlan},
    
            {path: '/managementProblem', component: ManagementProblem},
    
            {path: '/managementReply', component: ManagementReply},
    
            {path: '/addAttraction', component: AddAttraction},
    
            {path: '/managementAttraction', component: ManagementAttraction},
    
            {path: '/addFood', component: AddFood},
    
            {path: '/managingFood', component: ManagingFood},
    
            {path: '/addAccommodation', component: AddAccommodation},
    
            {path: '/managementAccommodation', component: ManagementAccommodation},

        ]

    })

    // 4. 创建和挂载根实例。
    
    // 记得要通过 router 配置参数注入路由，
    
    // 从而让整个应用都有路由功能
    
    const app = new Vue({
    
        router
    
    }).$mount('#app');
    
</script>
    
</html>

Vue.js实现后台菜单切换的更多相关文章

  1. vue、element-ui 后台菜单切换重新请求数据

    我们在做后台管理系统时,通常将数据请求挂载到created或mounted钩子中,但这样引发的问题是它只会被出发一次,如果不同菜单中数据关联性较大,切换过程中未及时更新数据,容易引发一些问题,这种情况 ...

  2. Vue.js连接后台数据jsp页面 ￣▽￣

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. vue.js与后台模板引擎“双花括号”冲突时的解决办法

    后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下 <!DOCTYP ...

  4. vue js 实现 树形菜单

    添加一个模板.<template id="menu-template"> <li v-if="model.nodes!=undefined"& ...

  5. Vue.js学习 — 微信公众号菜单编辑器(一)

    学习里一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <ht ...

  6. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  7. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  8. Vue.js库的第一天的学习

    一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心 ...

  9. Vue.js的简介

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view   Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...

随机推荐

  1. asp.net core系列 61 Ocelot 构建服务发现简单示例

    一.概述 Ocelot允许指定服务发现提供程序,如Consul或Eureka. 这二个中间件是用来实现:服务治理或秒服务发现,服务发现查找Ocelot正在转发请求的下游服务的主机和端口.目前Ocelo ...

  2. 从零到一详聊如何创建Vue工程及遇到的常见问题

    前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm in ...

  3. CBC 字节反转攻击

    一.CBC 简介 现代密码体制 现代密码中的加密体制一般分为对称加密体制(Symmetric Key Encryption)和非对称加密体制(Asymmetric Key Encryption).对称 ...

  4. Smobiler Service是什么？（Smobiler——.NET移动开发平台）

    在得知Smobiler即将推出新产品SmobilerService之后,许多人第一个疑问便是——Smobiler Service是什么? Smobiler的开发者对这个exe窗口一定不陌生,有时候因为 ...

  5. express+handlebars 快速搭建网站前后台

    最近在重构公司网站,原来网站使用PHP,前后端不分离,添加与更新网站内容仍使用原始方法,先出布局再把调好的布局给PHP后端开发,花时间长,维护不易.因此决定将网站前后端分离,核心功能含网站下单及CRM ...

  6. oracle nid修改dbname

    修改name的目的只是为了日后管理清晰点,不重复.我比较懒.记性又差,所以就整理记下1.检查当前nameSQL> show parameter nameNAME TYPE VALUE------ ...

  7. 关于web资金系统提现安全保护,防止极快的重复并发请求导致重复提现的解决思路

    关于WEB金融系统中的提现安全问题很多人没有深入思想,导致有漏洞,常常会遇到有些人遇到被攻击到导资金损失的麻烦,     其实要彻底解决重复并发请求 导致重复提现问题,是需要花点心思的,并没有看起来的 ...

  8. asp.net core 2.0的认证和授权

    在asp.net core中,微软提供了基于认证(Authentication)和授权(Authorization)的方式,来实现权限管理的,本篇博文,介绍基于固定角色的权限管理和自定义角色权限管理, ...

  9. IIS虚拟目录挂载文件服务器目录

    要求说明: 通过网站上传文件保存到统一的文件服务器上. 服务器说明: 1.文件服务器以下称为FilesServer,IP地址为:192.168.1.213 2.Web服务器为以下称为WebServer ...

  10. 彻底关闭windows10自动更新解决方案

    window10的自动更新其实和window7和window8都有所不同,有些人认为只要停止了windows updates 就可以了,不会再开始了! 但是往往不是这样的,因为微软在window up ...