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. 双缓冲技术局部更新原理之派生自View

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  2. 算法习题---3.12浮点数（UVa11809）

    一:题目 尴尬的非会员水印 二:题目摘要 1.int和float比较 int共32位,可以表示的最大的数为2^32次方 float虽然也是32位,但是是以指数形式保存,指数占8位(含符号),最大127 ...

  3. 清空表且id为0

    sql命令: 用于清空某表的数据 且让自增的id重新从0开始 truncate table

  4. python之socket编程（二）

    标签(空格分隔): socket编程 SocketServer解析 SocketServer内部使用I/O多路复用,多线程,多进程来实现客户端多并发访问Socket服务端,while循环时使用I/O多 ...

  5. Delphi中动态加载TreeView信息

    unit Unit3; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  6. ElasticSearch文档删除字段

    https://www.cnblogs.com/ljhdo/archive/2017/03/24/4885796.html

  7. docker安装并持久化postgresql数据库

    安装docker步骤略过 1.拉取postgresql镜像 docker pull postgresql 2.创建本地卷,数据卷可以在容器之间共享和重用, 默认会一直存在,即使容器被删除(docker ...

  8. IO操作-BIO

    BIO:block IO,即同步阻塞IO,主要应用于文件 IO 和网络 IO 这里主要说一下网络IO,以Socket编程为例进行说明 1.先建立Socket服务端 //BIO 服务器端程序 publi ...

  9. win10安装docker运行环境

    转自:https://www.cnblogs.com/stulzq/p/7743667.html Docker for Windows是Docker社区版(CE)应用程序. Docker for Wi ...

  10. [转帖]一文看懂mysql数据库本质及存储引擎innodb+myisam

    一文看懂mysql数据库本质及存储引擎innodb+myisam https://www.toutiao.com/i6740201316745740807/ 原创 波波说运维 2019-09-29 0 ...