碼上快樂

相關內容    簡體    繁體

Vue.js實現后台菜單切換

本文轉載自   查看原文   2019-04-24 11:37   1192    Vue.js的學習筆記
  • 因為剛初學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>

     


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue、element-ui 后台菜單切換重新請求數據 后台菜單權限設計實現思路 Vue.js實現選項卡切換 Vue.js實現tab切換效果 js實現菜單切換 組件切換方式（Vue.js） 后台菜單和權限管理 vue菜單切換 現有 Vue.js 項目快速實現多語言切換的一種思路 tpshop添加后台菜單
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM