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

子路由关键属性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. 慕课网4-2 编程练习：jQuery祖先后代选择器小案例

    4-2 编程练习 结合所学的祖先后代选择器,实现如下图所示效果 任务 (1)使用祖先后代选择器将第二段文字背景色变成红色 (2)使用jQuery的.css()方法设置样式,语法css('属性 '属性值 ...

  2. composer查看安装情况

    composer install --no-progress --profile -vvv

  3. ROS-URDF仿真

    前言:URDF (标准化机器人描述格式),是一种用于描述机器人及其部分结构.关节.自由度等的XML格式文件. 一.首先做一个带有四个轮子的机器人底座. 1.1 新建urdf文件 在chapter4_t ...

  4. [ CCO 2015 ] Artskjid

    \(\\\) \(Description\) \(N\)个点\(M\)条边的有向图,求从\(0\)号节点出发,\(N-1\)号节点结束,且图中每个点至多经过一次的最长路. \(N\in[2,18]\) ...

  5. Docker在Ubuntu16.04上安装

    转自:http://blog.51cto.com/collen7788/2047800 1.添加Docker源 sudo apt-get update 2.增加CA证书 sudo apt-get in ...

  6. Android基础TOP5_5：设置没有标题栏而且用系统壁纸当背景的界面

    在res/values目录下的style.xml设置如下 <style name="AppBaseTheme" parent="android:Theme.Wall ...

  7. Verilog之event

    1 Explicit event The value changes on nets and variable can be used as events to trigger the executi ...

  8. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  9. （转）Hibernate框架基础——映射普通属性

    http://blog.csdn.net/yerenyuan_pku/article/details/52739871 持久化对象与OID 对持久化对象的要求 提供一个无参的构造器.使Hibernat ...

  10. 当From窗体中数据变化时，使用代码获取数据库中的数据然后加入combobox中并且从数据库中取得最后的结果

    private void FormLug_Load(object sender, EventArgs e) { FieldListLug.Clear();//字段清除 DI = double.Pars ...