正文

vue实现简单的后台页面路由

譬如朝露 V管理员/ / 0 评论/ 855阅读
07 02 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .header {
        height: 50px;
        line-height: 50px;
        background-color: beige;
    }

    .container {
        display: flex;
    }

    .left {
        width: 30%;
        padding-right: 30px;
        box-sizing: border-box;
    }

    .right {
        width: 70%;
    }

    .header_menu {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: space-around;
    }
</style>

<body>
    <div id="app">
        <header class="header">
            <ul class="header_menu">
                <li>
                    <router-link to="/category">栏目管理</router-link>
                </li>
                <li>
                    <router-link to="/geren">个人中心</router-link>
                </li>
            </ul>
        </header>
        <section>
            <router-view></router-view>
        </section>
    </div>


    <script type="text/template" id="news">
        <div>
            <router-link to="/category/detail">新闻标题</router-link>
        </div>
    </script>
    <script type="text/template" id="product">
        <div>
                <router-link to="/category/detail">产品标题</router-link>
        </div>
    </script>
    <script type="text/template" id="category">
        <div class="container">
                <aside class="left">
                        <ul>
                                <li>
                                    <router-link to="/category/news">新闻</router-link>
                                </li>
                                <li>
                                    <router-link to="/category/product">产品</router-link>
                                </li>
                                
                            </ul>
                    </aside>
                    <main >
                            <router-view></router-view>
                    </main>
               
        </div>
    </script>
    <script type="text/template" id="geren">

        <div class="container">
                <aside class="left">
                        <ul>
                                
                                <li>
                                    <router-link to="/geren/my">我的资料</router-link>
                                </li>
                                
                            </ul>
                    </aside>
                    <main >
                            <router-view></router-view>
                    </main>
               
        </div>
    </script>
    <script type="text/template" id="detail">
        <div>
                详情页面
        </div>
    </script>
    <script type="text/template" id="my">
        <div>
                我的资料页面
        </div>
    </script>
    <script>
        var news = {
            template: '#news',
        }
        var product = {
            template: '#product'
        }

        var category = {
            template: '#category',
        }
        var geren = {
            template: '#geren'
        }
        var detail = {
            template: '#detail'
        }
        var my = {
            template: '#my'
        }

        var routes = [
            {
                path: '/',
                component: news,
            },
            {
                path: '/category',
                component: category,
                name: 'category',
                children: [
                    {
                        path: 'news',
                        component: news,
                    },
                    {
                        path: 'product',
                        component: product,
                    },
                    {
                        path: 'detail',
                        component: detail,
                    }
                ]
            },
            {
                path: '/geren',
                component: geren,
                name: 'geren',
                children: [
                    {
                        path: 'my',
                        component: my,
                    },

                ]
            }
        ]
        var router = new VueRouter({
            routes//挂载路由
        })
        new Vue({
            el: '#app',
            data: {
                title: 'hello vue',
                list: ['新闻', '产品']
            },
            router
        })
    </script>
</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。