官网地址：https://router.vuejs.org/zh-cn/essentials/nested-routes.html

路由嵌套一般使用在后台管理系统中

给一个比较简单的小案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>

    <style>

        .layout {

            width: 600px;

            margin: 100px auto;

        }

        .left {

            width: 200px;

            height: 500px;

            float: left;

            border: 1px solid red;

        }

        .right {

            width: 380px;

            height: 500px;

            float: right;

            border: 1px solid green;

        }

        .top {

            height: 100px;

            border: 1px solid black;

        }

    </style>

</head>

<script type="text/html" id="templateId">

    <div class="layout">

        <div class="left">左边菜单<br/><br/>

            <router-link to="/menu1/login">登录组件</router-link><br/><br/>

            <router-link to="/menu1/register">注册组件</router-link>

        </div>

        <div class="right">

            <div class="top">

                顶部内容

            </div>

            <div class="content">

                <br/>

                <router-view></router-view>

            </div>

        </div>

    </div>

</script>

<body>

    <div id="app">

        <router-link to="/menu1">菜单1</router-link>

        <router-link to="/menu2">菜单2</router-link>

        <router-view></router-view>

    </div>

</body>

<script>

    //1、注册组件

    const menu1 = {

        template:"#templateId"

    }

    const menu2 = {

        template:'<div>我是菜单2</div>'

    }

    const login = {

        template:'<div>我是登录组件</div>'

    }

    const register = {

        template:'<div>i am register components</div>'

    }

    //2、创建路由对象，设置路由规则

    const router = new VueRouter({

        routes:[

            {

                path:'/menu1',

                component:menu1,

                children:[

                    {path:'login',component:login},

                    {path:'register',component:register}

                ]

            },

            {

                path:'/menu2',

                component:menu2

            }

        ]

    })

    new Vue({

        el: "#app",

        router

    })

</script>

</html>

VUE中嵌套路由的更多相关文章

  1. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  2. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  3. vue中嵌套页面（iframe）

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

  4. vue中嵌套的iframe中控制路由的跳转及传参

    在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...

  5. vue中的路由独享守卫的理解

    1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...

  6. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

  7. vue 中的路由为什么 采用 hash 路由模式，而不是href超链接模式(Hypertext，Reference)？

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  8. Vue中的路由 以及默认路由跳转

    https://router.vuejs.org/ vue路由配置: 1.安装 npm install vue-router --save / cnpm install vue-router --sa ...

  9. vue中的路由嵌套

    1定义组件 const Index = { template:` <div>首页</div> ` } const Order = { template:` <div> ...

随机推荐

  1. 继续学习C：数字进制表示

    1. 数字后面跟D表示十进制,如:123D. 2. 数字后面跟B表示二进制,如:10010B. 3. 数字后面跟Q表示八进制,如:652Q. 4. 数字后面跟H表示十六进制,如:2B5H. 把十进制数 ...

  2. ffmpeg编码h264只包含I帧P帧的方法

    ffmpeg使用avcodc_encode_video编码,默认产生的h264包含B帧,在安防行业很多地方是不需要用到B帧的. 1.基础知识充电 这就涉及到h264的各种profile格式了,参考 h ...

  3. iPhone X机型适配

    1.启动页 启动App,发现App只能居中显示,不能上下充满. 问题产生的原因是:iPhone X是5.8英寸,比5.5英寸的屏幕还要大,没有合适的启动页可以加载,所以只能使用以前5.5英寸的启动页, ...

  4. VC++6.0注释快捷键的添加使用

    在eclipse等编辑工具中都有注释代码的快捷键,但是vc++6.0没有. vc++是以VB为脚本来控制的,在网上找到了一个VB的脚本供大家使用.   工具/原料 VC++6.0 方法/步骤 打开VC ...

  5. [转]JS内存泄漏排查方法(Chrome Profiles)

    Google Chrome浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描述文 ...

  6. Poj 2602 Superlong sums(大数相加)

    一.Description The creators of a new programming language D++ have found out that whatever limit for ...

  7. 人物-IT-雷军：雷军

    ylbtech-人物-IT-雷军:雷军 雷军 (全国工商联副主席,小米科技创始人.董事长) 雷军,1969年12月16日出生于湖北仙桃,毕业于武汉大学,是中国大陆著名天使投资人.  雷军作为中国互联网 ...

  8. UDK编辑器 49条小提示

    转自:http://www.cnblogs.com/hmxp8/archive/2012/02/09/2343674.html Very Helpful~ 01. First time using t ...

  9. HTTP 的若干问题

    1  HTTP无状态协议和Connection:Keep-Alive容易犯的误区 HTTP无状态:无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态.从另一方面讲,打开一个服务器上的 ...

  10. Nios程序烧写到EPCS方法 - 第1页 - asus119's Blog - EDN China电子设计技术

    Nios程序烧写到EPCS方法 - 第1页 - asus119's Blog - EDN China电子设计技术 这里主要是针对EP3C系列FPGA的Nios程序固化到EPCS中的方法做简要说明.硬件 ...