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

子路由关键属性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. （分治）51NOD 1019 逆序数

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.   如2 4 3 1中,2 1,4 3,4 1,3 1是 ...

  2. js 事件循环机制 EventLoop

    js 的非阻塞I/O  就是由事件循环机制实现的 众所周知  js是单线程的 也就是上一个任务完成后才能开始新的任务 那js碰到ajxa和定时器.promise这些异步任务怎么办那?这时候就出现了事件 ...

  3. php 编译时 报错 configure: error: libXpm.(a|so) not found.

    编译环境 centos7 php 5.4.26 $ yum install libXpm-devel 显示已安装 百度得知 ubuntu虚拟机安装lamp遇到的问题 configure: error: ...

  4. hdu61272017杭电多校第七场1008Hard challenge

    Hard challenge Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) ...

  5. 暴力+构造 Codeforces Round #283 (Div. 2) C. Removing Columns

    题目传送门 /* 题意:删除若干行,使得n行字符串成递增排序 暴力+构造:从前往后枚举列,当之前的顺序已经正确时,之后就不用考虑了,这样删列最小 */ /*********************** ...

  6. 流式套接字(SOCK_STREAM),数据报套接字 (SOCK_DGRAM) 的比较

    1.流式套接字 使用这种套接字时,数据在客户端是顺序发送的,并且到达的顺序是一致的.比如你在客户端先发送1,再发送2,那么在服务器端的接收顺序是先接收到1,再接收到2,流式套接字是可靠的,是面向连接的 ...

  7. 383 Ransom Note 赎金信

    给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串,判断第一个字符串ransom能不能由第二个字符串magazines里面的字符构成.如果可以构成,返回 true :否则返回 ...

  8. Spring.Net学习笔记(3)-创建对象

    一.开发环境 编译器:VS2013 .Net版本:.net framework4.5 二.涉及程序集 Spring.Core.dll:1.3 Common.Logging 三.开发过程 1.项目结构 ...

  9. [ POI 2010 ] Antisymmetry

    \(\\\) \(Description\) 给出一个长度为 \(N\) 的二进制串,定义一个子串是优秀的,当且仅当其正着看,和倒着按位取反后看结果是一样的,求整个串有多少个优秀的子串. \(N\le ...

  10. dedecms手机网站内页上一篇/下一篇的翻页功能

    修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...