• 因为刚初学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. .NETCore+EF+MySql+Autofac简单三层架构

    前言 其实就是一个简单依赖注入的三层架构.记录一下,大佬们就不用看下去了.重点在最后面,可以直接拖到底去看. 正文 1.贴代码 1.整体的一个结构.大佬们应该一眼就看明白了. 2.MySqlConte ...

  2. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  3. socketserver实现并发

    socketserver实现并发原理:给每一个前来链接的客户端开启一个线程执行通信.也就是给每一个连接“配备”了一个管家. 下面用一个简单的示例来演示socketserver实现并发(一个服务端,两个 ...

  4. 基于Unity的AR开发初探：发布AR应用到Android平台

    本文接上一篇,介绍一下如何通过Unity发布第一个AR应用至Android平台,在Android手机上使用我们的第一个AR应用. 一.一些准备工作 1.1 准备Java JDK 这里选择的是JDK 1 ...

  5. 创建一个 Spring Boot 项目，你会几种方法？

    我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 42W+,如下图: 2017 年由于种种原因,就没有 ...

  6. Java对字符串加密并返回星号※

     If you don't look back, you'll never know I waiting for you behind you. Java对字符串加密并返回星号※ PasswordUt ...

  7. jQuery中对未来的元素绑定事件用 on

    最近项目需要点击弹窗里面的a标签出现外连接跳转提示 <a href="javascript:void(0);" target="_blank" id=&q ...

  8. JDBC mysql 相关内容笔记

    解决乱码: url字符串加上?useUnicode=true&characterEncoding=utf-8; mysql数据库无法插入中文数据问题:将mysql数据库的编码改为utf-8; ...

  9. 16 ， CSS 边框与边界

    1.CSS 中边框的使用 2.CSS 中边界的使用 16.1 CSS 中边框的使用 属性名称 属性值 说明 border-color 十六进制 可依序设置上,右,下,左线颜色 英文名称 border- ...

  10. Android路由框架-ARouter详解

    文章大纲 一.页面路由基本介绍1.什么是页面路由2.为什么要使用页面路由二.页面路由框架ARouter介绍1.常用功能介绍2.常见应用场景三.源码下载四.参考文章   一.页面路由基本介绍 1.什么是 ...