Vue路由嵌套

<!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>嵌套路由</title>

</head>

<body>

    <div id="app">

    </div>

</body>

</html>

<script src="js/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    Vue.use(VueRouter);

    // 声明组件路由

    var Son1={

        template:`

            <h1>我是子组件1</h1>

        `

    };

    var Son2={

        template:`

            <h1>我是子组件2</h1>

        `

    };

    // 创建路由对象

    var Home={

        template:`

            <div>

                首页内容

                <br />

                <router-link to='/home/son1'>组件1</router-link>

                <router-link to='/home/son2'>组件2</router-link>

                <router-view></router-view>

            </div>

        `

    };

    // 命名路由

    var router=new VueRouter({

        // 配置路由对

        routes:[

            // 路由匹配规则

            {

                // 动态路由参数，以冒号开头

                path:'/home',

                name:'home',

                // 响应组件

                component:Home,

                // 路由嵌套

                children:[

                    {

                        //以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，
　　　　　　　　　　　　　　　　主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path。

                        path:'son1',

                        component:Son1

                    },

                    {

                        path:'son2',

                        component:Son2

                    }

                ]

            }

        ]

    });

    var App={

        template:`

            <div>

                    <!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->

                    <router-link :to = "{name:'home'}">首页</router-link>

                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>

        `

    };

    new Vue({

        el:'#app',

        template:`<App />`,

        router:router,

        components:{

            App

        }

    })

</script>

Vue路由嵌套的更多相关文章

  1. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...

  2. vue 路由嵌套高亮问题

    正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...

  3. vue教程3-06 vue路由嵌套(多层路由)，路由其他信息

    多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Vue路由嵌套和命名视图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue路由--嵌套路由

    静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. vue路由嵌套，vue動態路由

    https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...

  7. 关于vue路由嵌套遇到的坑~

    关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. vue路由嵌套，对应展示的视图

  9. vue学习路由嵌套

    1. 路由嵌套和参数传递 传参的两种形式: a.查询字符串:login?name=tom&pwd=123 {{$route.query}} ------ <li><route ...

随机推荐

  1. Qt使用boost库

    1.在官网下载boost库 boost_1_70_0.zip 2.将你的Qt的工具目录(有gcc.exe)设置环境变量.(比如F:\Qt592\Tools\mingw530_32\bin) 3.在命令 ...

  2. 《海会圣贤》高清字幕版（由香港佛陀教育协会发布DVD恭敬转成）

    常念阿彌陀佛 2015-09-22 视频(建议WIFI下收看)时长72分钟 https://v.qq.com/x/page/f0166amk57h.html 香港佛陀教育协会发布DVD   DVD+高 ...

  3. 关于采样率&位深&码率&无损的一些心得

    转载自:https://blog.csdn.net/Marenow/article/details/85253283 记笔记,记下来自己的一些关于音频基础知识的总结. 采样率外界的声音都是模拟信号,在 ...

  4. AFNetWorking实现参数以body传输请求数据

    /** * 异步POST请求:以body方式,支持数组 * * @param url 请求的url * @param body body数据 * @param success 成功回调 * @para ...

  5. 多林环境中的ADFS

    公司有两个或更多Active Directory林,但是只有一个ADFS,如何让ADFS支持多个域林呢?(一个ADFS只能部署在一个域中,不能跨域) 答案是:在部署ADFS的林和所有其他林之间建立双向 ...

  6. 最新 盛天网络java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.盛天网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了盛天网络.6.7月主要是做系统复习.项目复盘.Leet ...

  7. python+unittest框架第一天unittest之简单认识Test Fixure：测试固件【8月17更新】

    20万的慢慢会实现的吧,hhh unittest框架,我就不在介绍了,百度有很详细的介绍. 我们只要了解: 1.unittest是单元测试框架 2.它提供用例组织与执行:在实际工作中案例可能有上百条, ...

  8. IO-file-07 递归

    package com.bwie.io; /** * 递归: * 方法自己调用自己 * 递归头:何时结束递归 * 递归体:重复调用 * @author Allen17805272076 * */ pu ...

  9. Yarn 资源调度器

    1. 概述 YARN 是一个资源调度平台,负责为运算程序提供服务器运算资源: YARN 由ResourceManager,NodeManager, ApplicationMaster 和 Contai ...

  10. [CF293B]Distinct Paths_搜索_剪枝

    Distinct Paths 题目链接:http://codeforces.com/problemset/problem/293/B 数据范围:略. 题解: 带搜索的剪枝.... 想不到吧..... ...