• 因为刚初学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的MiddleWare思想处理复杂业务流程

    最近利用Asp.Net Core 的MiddleWare思想对公司的古老代码进行重构,在这里把我的设计思路分享出来,希望对大家处理复杂的流程业务能有所帮助. 背景 一个流程初始化接口,接口中根据传入的 ...

  2. Redis主从同步要深入理解？一篇文章足矣！

    前言: 今天想和大家分享有关 Redis 主从同步(也称「复制」)的内容. 我们知道,当有多台 Redis 服务器时,肯定就有一台主服务器和多台从服务器.一般来说,主服务器进行写操作,从服务器进行读操 ...

  3. Github排序（转载）

    目录 1. 冒泡排序 2. 选择排序 3. 插入排序 4. 希尔排序 5. 归并排序 6. 快速排序 7. 堆排序 8. 计数排序 9. 桶排序 10. 基数排序 参考:https://mp.weix ...

  4. 必看！如何让你的LBS服务性能提升十倍！

    本文由云+社区发表 作者:腾讯云数据库团队 随着国内服务共享化的热潮普及,共享单车,共享雨伞,共享充电宝等各种服务如雨后春笋,随之而来的LBS服务定位问题成为了后端服务的一个挑战.MongoDB对LB ...

  5. （转）ceph 常用 运维命令--查看信息 - 不错的文档

    下面是测试验证环节 1. 创建一个 pool rbd create foo --size 4 --image-format 2 --image-feature layering 2. 挂载和格式化 r ...

  6. 连表查询都用Left Join吧

    最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在哪),我用最简单的方式来描述这两者的区 ...

  7. .NET+PostgreSQL实践与避坑指南

    简介 .NET+PostgreSQL(简称PG)这个组合我已经用了蛮长的一段时间,感觉还是挺不错的.不过大多数人说起.NET平台,还是会想起跟它“原汁原味”配套的Microsoft SQL Serve ...

  8. Php如何返回json数据，前后端分离的基本解决方案

    php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...

  9. git客户端保存用户名密码

    [转载]原文地址:https://blog.csdn.net/qq_26819733/article/details/52735123/ 看图说话,直接在Tortoisegit的设置中,点git-&g ...

  10. 经典排序算法 — C#版本（中）

    归并排序比较适合大规模得数据排序,借鉴了分治思想. 归并排序原理 自古以来,分久必合合久必分. 我们可以这样理解归并排序,分-分到不能分为止,然后合并. 使用递归将问题一点一点分解,最后进行合并. 分 ...