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. using kafkacat reset kafka offset

    1. install kafkacat Ubuntu apt-get install kafkacat CentOS install deepenency yum install librdkafka ...

  2. 创建IDOC

    第一步:WE31 创建IDOC所包含的字段. 第二步:WE30 创建IDOC 把Segment分配给IDOC 第三步:WE81 创建信息类型 第四步:WE82 把IDOC类型与信息类型对应. 第五步: ...

  3. LeetCode_28. Implement strStr()

    28. Implement strStr() Easy Implement strStr(). Return the index of the first occurrence of needle i ...

  4. vs2015配置link.exe环境变量

    https://www.cnblogs.com/johnwii/p/4966086.html

  5. 【搬运】NumPy_for_Matlab_Users

    搬运自:http://scipy.github.io/old-wiki/pages/NumPy_for_Matlab_Users.html. 1.Introduction MATLAB和NumPy/S ...

  6. 【数据库开发】Redis消息通知

    消息通知 任务队列 使用任务队列的好处 松耦合.生产者和消费者无需知道彼此的实现细节,只需要约定好任务的描述格式.这使得生产者和消费者可以由不同的团队使用不同的编程语言编写 易于扩展.消费者可以有多个 ...

  7. .net和ASP.net,c#的区别

    .NET.C#和ASP.NET三者之间的区别如下: 一.什么是.NET?.NET是微软公司下的一个开发平台,.NET核心就是.NET Framwork(.NET框架)是.NET程序开发和运行的环境,在 ...

  8. nginx 工作原理总结

    1.  Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(locat ...

  9. 用gcd库函数求最大公约数

    如何直接调用库函数来求最大公约数呢? 1.首先看怎样求两个数的最大公约数 要注意gcd()前面是两个“_” !!! #include<bits/stdc++.h> using namesp ...

  10. 权限管理ranger

    为超级管理员airflow赋权: 在ranger 中的hive中加入root policy, url policy 在hdfs中加入/ 的poclicy 你如果需要自动ldap同步,时间1小时,ran ...