嵌套路由就是路由里面嵌套他的子路由

子路由关键属性children

每一个子路由里面可以嵌套多个组件

子组件又有路由导航和路由容器

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

下面实例讲解

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <router-link to="/green" tag="li">green</router-link>

    <router-link to="/fruit" tag="li">fruit</router-link>

<router-view></router-view>

</div>

<template id="green">

<div>蔬菜

    <router-link to="/green/organic">有机</router-link>

    <router-link to="/green/inorganic">无机</router-link>

    <router-view></router-view>

</div>

</template>

<template id="fruit">

<div>水果

    <router-link to="/fruit/sweet">甜的</router-link>

    <router-link to="/fruit/acid">酸的</router-link>

    <router-view></router-view>

</div>

</template>

</body>

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

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

<script>

    //父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的

    let green={template:'#green'}

    let organic={template:"<div>有机蔬菜organic</div>"}

    let inorganic={template:"<div>无机蔬菜inorganic</div>"}

    let fruit={template:'#fruit'}

    let sweet={template:"<div>甜的</div>"}

    let acid={template:"<div>酸的</div>"}

    //路由路径映射表

    let routes=[

        //路由默认去的第一个组件

        {

            path:'',

            component:green

        },

        {

            path:"/green",

            component:green,

            children:[

                {

                    path:"",

                    component:organic

                },

                {

                    path:"organic",

                    component:organic

                },

                {

                    path:"inorganic",

                    component:inorganic

                }

            ]

        },

        {

            path:"/fruit",

            component:fruit,

            children:[

                {

                    path:"",

                    component:sweet

                },

                {

                    path:"sweet",

                    component:sweet

                },

                {

                    path:"acid",

                    component:acid

                }

            ]

        },

        //所有没有找到时候，去地址/green的组件

        {

            path:"*",

            redirect:'/green'

        }

    ]

    //实例化一个路由

    let router=new VueRouter({

        routes

    })

    let vm=new Vue({

        el:"#app",

        data:{

        },

        router

    })

</script>

</html>

vue.js嵌套路由-------由浅入深的更多相关文章

  1. vue.js之路由

    Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...

  2. Vue.js：路由

    ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...

  3. VUE中嵌套路由

    官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...

  4. [Vue]vue-router嵌套路由(子路由)

    总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1.重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如 ...

  5. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  6. Vue.js的路由之——vue-router快速入门

    直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...

  7. vue.js 二 路由懒加载

    当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...

  8. vue.js关于路由的跳转

    1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 route ...

  9. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

随机推荐

  1. ionic之AngularJS扩展动态组件

    目录: 1. 模态对话框 : $ionicModal 2. 上拉菜单 : $ionicActionSheet 3. 弹出框 : $ionicPopup 4. 浮动框 : $ionicPopover 5 ...

  2. Linux学习之02_Linuxd的文件权限与目录配置

    这里一些基本介绍就不介绍了,还是来介绍一下相关的命令 这一节重要的命令有这些: chgrp chown chmod 1.改变文件属性和权限 chgrp----改变文件所属用户组 chown----改变 ...

  3. O（1)的快速乘

    那么 有位神仙已经说了O(1)的算法(当然不是我) 这是一种骚操作 直接放代码了啊 inline LL mul(LL a,LL b,LL Mod){ LL lf = a * ( b >> ...

  4. serlvet HttpServletRequest

    1.http://localhost/az/servlet/TestResponse out.print("getServletPath:"+request.getServletP ...

  5. Spring-security自定义过滤器

    定义过滤器 public class TokenAuthenticationFilter extends AbstractPreAuthenticatedProcessingFilter { publ ...

  6. Java学习笔记-eclipse配置

    一.配置Java环境变量 JAVA_HOME:D:\Program Files\Java\jdk1.7.0_76 CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HO ...

  7. Objective-C设计模式——中介者Mediator（对象去耦）

    中介者模式 中介者模式很好的诠释了迪米特法则,任意两个不相关的对象之间如果需要关联,那么需要通过第三个类来进行.中介者就是把一组对象进行封装,屏蔽了类之间的交互细节,使不同的类直接不需要持有对方引用也 ...

  8. 第八届蓝桥杯省赛C/C++ A组第8题 包子凑数

    参考了http://blog.csdn.net/y1196645376/article/details/69718192 思路: 数论+完全背包. 实现: #include <iostream& ...

  9. C语言入门100题，考算法的居多

    入门题,考算法的居多,共同学习! 1. 编程,统计在所输入的50个实数中有多少个正数.多少个负数.多少个零. 2. 编程,计算并输出方程X2+Y2=1989的所有整数解. 3. 编程,输入一个10进制 ...

  10. 【sqli-labs】 less63 GET -Challenge -Blind -130 queries allowed -Variation2 (GET型 挑战 盲注 只允许130次查询 变化2)

    引号闭合 http://192.168.136.128/sqli-labs-master/Less-63/?id=1' or '1'='1 剩下的和Less62一样