Vue--router-->>项目多路由嵌套--常用

来源：互联网发布：python smtp ssl 编辑：程序博客网时间：2024/05/22 08:13
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>vue-router</title>    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">    <script src="js/vue.js" ></script>    <!--- 第一步，将vue-router的源代码引入--->    <script src="js/vue-router.js" ></script></head><body><div id="app">    <div class="container">        <ul class="nav nav-pills">            <!--- 使用router-link 进行跳转 --->            <li><router-link to="/index/i">首页</router-link></li>            <li><router-link to="/index/b">图书列表</router-link></li>            <li><router-link to="/index/g">游戏列表</router-link></li>        </ul>        <div>            <router-view></router-view>        </div>    </div></div><script>    /**     * 配置路由，使用官方的VueRouter     * new VueRouter 得到一个VueRouter的实例     * 在VueRouter中传递参数（对象）     * 在参数中有个routes的数组属性     * 这个数组是一个对象数组     * 每一个对象就是一个路由状态     */    var router = new VueRouter({        routes : [            {                path : "/index",                component : {                    template : `//这里用了反（单引号）可以有代码提醒 也可以用正常的单引号                            <div>                                <h1>首页</h1>                                <router-view></router-view>                            </div>                        `//                        template : "<div><router-view></router-view></div>"  另外一种写法                },                children : [                    {                        path : "i",                        component : {                            template : "<h1>这个是嵌套的首页</h1>"                        }                    },                    {                        path : "b",                        component : {                            template : "<h1>这个是嵌套的图书列表</h1>"                        }                    },                    {                        path : "g",                        component : {                            template : "<h1>这个是嵌套的游戏列表</h1>"                        }                    }                ]            }        ]    });    new Vue({        data : {            username : "刘德华"        },        router : router    }).$mount("#app");</script></body></html>
阅读全文
0 0