Vue.router中的嵌套路由,和跳转的四种方式

嵌套路由（又叫 嵌套子路由）嵌套路由--- 通常由多层嵌套的组件组合而成。

1:router-view的细分

router-view第一层中，包含一个router-view

2:每一个坑挖好了，要对应单独的组件

路由配置

routes: [
            {
                path:/menu,
                name:menu,
                component:menu,
                //路由嵌套增加此属性
                children:[
                    //在这里配置嵌套的子路由
                    {},
                    {},
                    {}
                ]
            }
        ]

在进入首页下面会有主导航，首页、新闻中心、客户案例，关于我们，这里拿新闻中心举个例子：

1.首先写好两个基本路由跳转主页和新闻中心，做好的效果如下：

2.在声明两个子组件，为新闻中心下的嵌套子路由

let One = {
            template:`#one`
        }
 let Two = {
            template:`#two`
        }

在视图层写上内容

<template id="one">
        <div>
            <h1>行业新闻</h1>
        </div>
    </template>
    <template id="two">
        <div>
            <h1>公司新闻</h1>
        </div>
    </template>

3.先在 路由对象中的写好 我们的 嵌套路由（子路由）children:[] 在配置路由对象，

是谁的子路由，就在谁的配置规则下写

routes:[
                {
                    path:/index,
                    name:Inedx,
                    component:Index
                },
                {
                    path:/news,
                    name:News,
                    component:News,
                    children:[
                        {
                            // 要先写父级的路劲在后面跟子路由的路劲
                            path:/news/one,
                            // 名称也是，谁后面的子路由，所以用父级去点它的子路由
                            name:News.One,
                            component:One
                        },
                        {
                            path:/news/two,
                            name:News.Two,
                            component:Two
                        }
                    ]
                }
            ]

4.到组件中的模板（视图层）中，通过标签跳转，进行设置(在父路由的视图层设置)

在视图层，下面四种方式，均可以访问到 嵌套路由下对应的组件！！！

(1)

<template id="news">
        <div>
            <h1>新闻中心</h1>
            <router-link to="/news/one">子路由1</router-link>
            <router-link to="/news/two">子路由2</router-link>
            <router-view></router-view>
        </div>
    </template>

(2)

<template id="news">
        <div>
            <h1>新闻中心</h1>
            <router-link :to="{name:News.One,path:/news/one}">子路由1</router-link>
            <router-link :to="{name:News.Two,path:/news/two}">子路由2</router-link>
            <router-view></router-view>
        </div>
    </template>

(3)第二种方法只要name，不要path

<template id="news">
        <div>
            <h1>新闻中心</h1>
            <router-link :to="{name:News.One}">子路由1</router-link>
            <router-link :to="{name:News.Two}">子路由2</router-link>
            <router-view></router-view>
        </div>
    </template>

(4)第二种方法只要path，不要name

<template id="news">
        <div>
            <h1>新闻中心</h1>
            <router-link :to="{path:/news/one}">子路由1</router-link>
            <router-link :to="{path:/news/two}">子路由2</router-link>
            <router-view></router-view>
        </div>
    </template>

查看效果：