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

子路由关键属性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. bzoj1770: [Usaco2009 Nov]lights 燈（折半搜索）

    1770: [Usaco2009 Nov]lights 燈 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1153  Solved: 564[Submi ...

  2. mac 修改用户权限

    想安装thinkPHP 下载完以后 访问报403错误 于是百度找 也没找到原因 自己猜测是不是用户权限问题 就是下面目录为tp的用户权限 不是root 其他是root的都能访问 于是百度搜了权限如何修 ...

  3. httpd 安装ssl证书

    1) 安装ssl模块 # yum install mod_ssl -y Ps:安装完成后,会在/etc/httpd/conf.d/下生成一个ssl.conf配置文件. 2) 先建一个目录用来放ssl证 ...

  4. 题解报告：hdu 1061 Rightmost Digit（快速幂取模）

    Problem Description Given a positive integer N, you should output the most right digit of N^N. Input ...

  5. python学习笔记(6)——for...in &while

    for x in ...循环就是把每个元素代入变量x,然后执行缩进块的语句. 注意:python中的格式也起到语法规则的作用,缩进块就是一个例 求和问题,比较异同 1/sum= ,,,,,,,,,]: ...

  6. 隐藏win10任务栏输入法M图标

    在任务栏右键=>任务栏设置=>打开或关闭系统图标=>(关闭)输入指示

  7. java动态代理实现与原理详细分析（【转载】By--- Gonjan ）

    [转载]By---Gonjan  关于Java中的动态代理,我们首先需要了解的是一种常用的设计模式--代理模式,而对于代理,根据创建代理类的时间点,又可以分为静态代理和动态代理. 一.代理模式     ...

  8. 这段代码很Pythonic | 相见恨晚的 itertools 库

    前言 最近事情不是很多,想写一些技术文章分享给大家,同时也对自己一段时间来碎片化接受的知识进行一下梳理,所谓写清楚才能说清楚,说清楚才能想清楚,就是这个道理了. 很多人都致力于把Python代码写得更 ...

  9. Spring Security 介绍与Demo

    一.Spring Security 介绍 Spring Security 是针对Spring项目的安全框架,也是Spring Boot底层安全模块的默认技术选型.我们仅需引入spring-boot-s ...

  10. Python常用的内建模块

    PS:Python之所以自称“batteries included”,就是因为内置了许多非常有用的模块,无需额外安装和配置,即可直接使用.下面就来看看一些常用的内建模块. 参考原文 廖雪峰常用的内建模 ...