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

子路由关键属性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. python自动化测试学习笔记-unittest参数化

    做接口测试的时候,当一个参数需要输入多个值的时候,就可以使用参数来实现: python中unittest单元测试,可以使用nose_parameterized来实现: 首先需要安装:pip  inst ...

  2. 北工大2017校赛 1101:要打车的FanZzz

    题目链接: http://bjutacm.openjudge.cn/lianxi/1101/ 思路: 二分 + 二分图最大匹配. 开始的时候我想直接用最小费用流模型,后来发现这样是错误的.因为这道题实 ...

  3. 自定义封装 banner 组件

    1. 效果图预览 2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装.可设置 项目中图片,网络图片, View:支持循环自动播放,手势滑动切换,item点击事件,可设置 ...

  4. 上传一个npm包

    1.先创建一个npm账号 https://www.npmjs.com/signup 2.在cmd里输入命令进入项目文件夹 3.使用npm init 命令创建一个package.json(确保nodej ...

  5. 【转】jvm类加载

    类加载机制 JVM把class文件加载的内存,并对数据进行校验.转换解析和初始化,最终形成JVM可以直接使用的Java类型的过程就是加载机制. 类从被加载到虚拟机内存中开始,到卸载出内存为止,它的生命 ...

  6. 使用antlr4及java实现snl语言的解释器

    对于antlr4的基础使用,请参考我的前一篇文章<用antlr4来实现<按编译原理的思路设计的一个计算器>中的计算器>. 其实我对于antlr4的理解也仅限于那篇文章的范围,但 ...

  7. Java 基础入门随笔（4） JavaSE版——程序流程控制

    上一节对于运算符有了大致的了解,这一节针对程序流程控制进行复习!程序流程控制包括顺序结构.判断结构(if).选择结构(switch).循环结构. 1.判断结构 ①if语句的第一种格式:        ...

  8. 【转】非常好的Java反射例子

    转自 http://www.douban.com/note/306848299/ 原文: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时 ...

  9. Window提高_3.1练习_双进程守护

    双进程守护 当打开一个进程A的时候,此进程检测是否存在进程B,如果不存在就创建进程B. 进程B的作用是检测进程A是否被关闭,如果被关闭了,就再创建一个进程A. 双进程守护A.exe代码如下: #inc ...

  10. Nuxt.js使用详解

    首先来讲一下服务端渲染 直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJA ...