逆向传值与路由

最新推荐文章于 2022-09-15 14:52:38 发布

从人到猿

最新推荐文章于 2022-09-15 14:52:38 发布

阅读量792

点赞数

分类专栏： Vue 文章标签：逆向传值与路由

本文链接：https://blog.csdn.net/qq_39200185/article/details/100109285

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

逆向传值

正向传值：父组件给子组件
逆向传值：子组件把数据传递给父组件，默认是不允许的，如果想逆向传值，就必须要通过事件来触发，通过事件将自定义事件抛出，并且接受一个自定义事件，来进行传值

操作步骤：

通过自定义事件来触发事件的抛出
创建自定义抛出事件（抛出的是需要传递给父组件的数据），使用this.$emit(“抛出自定义事件的名字”,“抛出的数据”)
接受自定义事件，在子组件被调用的时候接受，抛出自定义事件的名字=“调用的函数”，这个函数需要创建在父组件中
在父组件中创建的这个函数中，有一个形参（vue会自动的把抛出的数据赋值给这个形参）
案例：

<div id="demodiv">
    <fu></fu>
</div>
<template id="futem">
    <div>
        <p>我是父组件</p>
        <!-- 3.接受自定义事件，在子组件被调用的时候接受
        @抛出自定义事件的名字="调用的函数"
        这个函数需要创建在父组件中 -->
        <zi :text="futext" @zipao="fufun"></zi>
    </div>
</template>
<template id="zitem">
    <div>
        <p>我是子组件^_-_^{{text}}</p>
        <!-- 1.通过自定义事件来触发事件的抛出 -->
        <button @click="fun()">点击抛出自定义事件</button>
    </div>
</template>
<script>
    new Vue({
        el: "#demodiv",
        data: {

        },
        methods: {},
        components: {
            "fu": {
                template: "#futem",
                data() {
                    return {
                        futext: "我是父组件的数据"
                    }
                },
                methods: {
                    fufun(val) {
                        //4.在这个函数中有一个形参（vue会自动的把抛出的数据赋值给这个形参）
                        this.futext = val;
                    }
                },
                components: {
                    "zi": {
                        template: "#zitem",
                        props: {
                            text: {
                                type: String,
                                requires: true
                            }
                        },
                        data() {
                            return {
                                zitext: "我是子组件中的数据"
                            }
                        },
                        methods: {
                            //2.创建自定义抛出事件（抛出的是需要传递给父组件的数据）
                            fun() {
                                // this.$emit("抛出自定义事件的名字","抛出的数据")
                                this.$emit("zipao", this.zitext)
                            }
                        }
                    }
                }
            }
        }
    })
</script>

在上面的案例中，首先进行了正向传值，然后点击按钮后又进行了逆向传值，在理解时可能会比较难以理解，下面是经过仅进行逆向传值的代码

<div id="demodiv">
    <fu></fu>
</div>  
<template id="futem">
    <div>
        <p>我是父组件{{futext}}</p>
        <zi @zipao="fufun"></zi>
    </div>
</template>
<template id="zitem">
    <div>
        <p @click="zifun()">我是子组件</p>
    </div>
</template>
<script>
    new Vue({
        el:"#demodiv",
        data:{},
        methods:{},
        components:{
            "fu":{
                template:"#futem",
                data(){
                    return{
                        futext:"父元素的数据"
                    }
                },
                methods:{
                    fufun(val){
                        this.futext=val;
                    }
                },
                components:{
                    "zi":{
                        template:"#zitem",
                        data(){
                            return{
                                zitext:"子组件的数据"
                            }
                        },
                        methods:{
                            zifun(){
                                this.$emit("zipao",this.zitext)
                            }
                        }
                    }
                }
            }
        }
    })
</script>

路由配置

传统页面跳转:使用a标签配合href属性，进行不同页面跳转

1. 路由的作用

路由：所有的路径都经由这个模块进行重新分配（改变URL，在不重新请求页面的情况下，更新页面视图。）
根据 url 锚点路径，在容器中加载不同的模块
完成 SPA（单页面应用）的开发

2. 路由原理

利用锚点完成切换
页面不会刷新

3. 路由功能引入

官网推荐使用 vue-router.js 库来引入路由功能模块

4. 一级路由配置

用 Vue.js + Vue Router 创建单页面应用，是非常简单的。将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

定义 (路由) 组件。

let tema={template:"#tema"};
let temb={template:"#temb"};
let temc={template:"#temc"};
let temd={template:"#temd"};

注意：可以使用template模板进行html封装，调用id属性更加方便

<template id="tema">
    <div>
        <p>indexindexindexindexindex</p>
    </div>
</template>

定义路由
使用component来进行路由映射组件。name属性是命名路由通过一个名称来标识一个路由

var routes=[
    //{name:"给当前的这个规则起名字",path:"路径",component:"组件"};
    {name:"index",path:"/index",component:tema},
    {name:"home",path:"/home",component:temb},
    {name:"phone",path:"/phone",component:temc},
    {name:"user",path:"/user",component:temd}
]

在这里注意routes的书写，至于为什么请继续往下看
3. 创建router实例，然后传’routes’配置

var router=new VueRouter({
    routes   //键值相同只写一个
})

在定义路由的时候将变量名命名为routes，在创建router实例的时候键值相同就可以只写一个了
4. 创建和挂载根实例
通过 router 配置参数注入路由，从而让整个应用都有路由功能

new Vue({
    el:"#demodiv",
    data:{},
    //4.把路由对象传递给实例
    router //键值相同只写一个
})

设置路由显示位置（路由出口）
路由出口< router-view></ router-view>表明路由模版显示的位置

<router-view></router-view>

设置跳转的连接
使用< router-link to=’/url’></ router-link>标签设置路由跳转,to属性用来设置跳转链接

<router-link to="/index">index</router-link>
<router-link to="/home">home</router-link>
<router-link to="/phone">phone</router-link>
<router-link to="/user">user</router-link>

这样一个基本的一级路由就写好了，下面是完整的代码

<div id="demodiv">
    <!-- 6.设置跳转的连接 -->
    <router-link to="/index">index</router-link>
    <router-link to="/home">home</router-link>
    <router-link to="/phone">phone</router-link>
    <router-link to="/user">user</router-link>
    <!-- 5.设置路由显示位置（路由出口） -->
    <router-view></router-view>
</div>
<!-- 写入组件 -->
<template id="tema">
    <div>
        <p>indexindexindexindexindex</p>
    </div>
</template>
<template id="temb">
    <div>
        <p>homehomehomehomehomehome</p>
    </div>
</template>
<template id="temc">
    <div>
        <p>phonephonephonephonephone</p>
    </div>
</template>
<template id="temd">
    <div>
        <p>useruseruseruseruseruser</p>
    </div>
</template> 
<script>
    //1.定义组件模板
    let tema={template:"#tema"};
    let temb={template:"#temb"};
    let temc={template:"#temc"};
    let temd={template:"#temd"};
    //2.配置路由规则(注意单词)
    var routes=[
        //{name:"给当前的这个规则起名字",path:"路径",component:"组件"};
        {name:"index",path:"/index",component:tema},
        {name:"home",path:"/home",component:temb},
        {name:"phone",path:"/phone",component:temc},
        {name:"user",path:"/user",component:temd}
    ]
    //3.创建路由实例(注意单词)
    var router=new VueRouter({
        routes   //键值相同只写一个
    })

    new Vue({
        el:"#demodiv",
        data:{},
        //4.把路由对象传递给实例
        router //键值相同只写一个
    })
</script>

注意要引入vue和vue-router
案例：底部路由bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>底部路由bar</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html{
            font-size:26.67vw;
        }

        .footer{
            width:100%;
            height:0.5rem;
            background-color: gainsboro;
            position: fixed;
            bottom:0px;
            font-size:0.16rem;
            display: flex;
        }

        .footer a{
            flex: 1;
            text-align: center;
            line-height:0.5rem;
            text-decoration: none;
        }

        div{
            font-size:0.16rem;
        }

        .router-link-active{
            color:red;
        }

    </style>
</head>
<body>
    <div id="demodiv">
        <!-- 5.设置路由显示位置 -->
        <router-view></router-view>
        <bar></bar>
    </div>

    <template id="tema">
        <div>
            <p>indexindexindexindexindexindex</p>
        </div>
    </template>

    <template id="temb">
        <div>
            <p>homehomehomehomehomehomehomehome</p>
        </div>
    </template>

    <template id="temc">
        <div>
            <p>phonephonephonephonephonephone</p>
        </div>
    </template>

    <template id="temd">
        <div>
            <p>usreusreusreusreusreusreusreusre</p>
        </div>
    </template>

    <template id="bartem">
        <div class="footer">
            <!-- 6.设置跳转的连接 -->
            <router-link to="/index">index</router-link>
            <router-link to="/home">home</router-link>
            <router-link to="/phone">phone</router-link>
            <router-link to="/user">user</router-link>
        </div>
    </template>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //1.定义模板组件
    let tema={template:"#tema"};
    let temb={template:"#temb"};
    let temc={template:"#temc"};
    let temd={template:"#temd"};
    //2.配置路由规则
    var routes=[
        {name:"index",path:"/index",component:tema},
        {name:"home",path:"/home",component:temb},
        {name:"phone",path:"/phone",component:temc},
        {name:"user",path:"/user",component:temd}
    ]
    //3.创建路由实例
    var router = new VueRouter({
        routes
    })
    new Vue({
        el:"#demodiv",
        data:{},
        //4.把路由对象输出给vue实例
        router,
        components:{
            "bar":{
                template:"#bartem"
            }
        }

    })
</script>

注意：

当 < router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。
通过自动设置的类名方便进行路由导航样式设置

5.js跳转

使用this.$touter全局路由的push()方法进行路由跳转
push和replace的区别:push跳转的页面可以回退,replace跳转的页面不能回退

fun(i) {
    if(i==1){
        //push跳转的页面可以回退
        this.$router.push("/phone");
    }else{
        //replace跳转的页面不能回退
        this.$router.replace("/user");
    }
}

6. 编程式的导航

之前已经使用js方式进行跳转路由–这种方式被称之为编程式导航
使用router-link进行跳转路由–称之为声明式
扩展路由跳转方式：router.replace（）替换
与push（）唯一的不同就是，它不会向历史url记录中添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.go(n)这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

funa(){
    this.$router.go(1);//在浏览器记录中前进一步，等同于history.forward()
}  
funb(){
    this.$router.go(-1);//后退一步记录，等同于history.back()
}

扩展push和replace，通过编程的方式导航：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编程方式导航</title>
</head>

<body>
    <div id="demodiv">
        <!-- 编程式导航======>通过js的方式进行路由的跳转 -->
        <button @click="fun(1)">点我使用push跳转到phone</button>
        <button @click="fun(2)">点我使用replace跳转到user</button>
        <!-- 5.设置路由显示位置 --> 
        <router-view></router-view>
    </div>

    <template id="tema">
        <div>
            <p>indexindexindexindexindex</p>
        </div>
    </template>

    <template id="temb">
        <div>
            <p>homehomehomehomehomehomehome</p>
        </div>
    </template>

    <template id="temc">
        <div>
            <p>phonephonephonephonephonephone</p>
        </div>
    </template>

    <template id="temd">
        <div>
            <p>useruseruseruseruseruseruseruser</p>
        </div>
    </template>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //1.定义组件模板
    let tema = {
        template: "#tema"
    };
    let temb = {
        template: "#temb"
    };
    let temc = {
        template: "#temc"
    };
    let temd = {
        template: "#temd"
    };
    //2.配置路由规则
    var routes = [{
            name: "index",
            path: "/index",
            component: tema
        },
        {
            name: "home",
            path: "/home",
            component: temb
        },
        {
            name: "phone",
            path: "/phone",
            component: temc
        },
        {
            name: "user",
            path: "/user",
            component: temd
        }
    ]

    //3.创建路由实例
    var router = new VueRouter({
        routes
    })
    new Vue({
        el: "#demodiv",
        data: {},
        //4.把路由传递给vue实例
        router,
        methods: {
            fun(i) {
                if(i==1){
                    //push跳转的页面可以回退
                    this.$router.push("/phone");
                }else{
                    //replace跳转的页面不能回退
                    this.$router.replace("/user");
                }
            }
        }

    })
</script>

7. 捕获所有路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)

{
    name: "rpr",
    path: "/*",
    component: rpr
}

匹配任意开头的路径使用通配符（*）
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: ‘*’ } 通常用于客户端 404 错误。
案例：匹配所有路径

 <div id="demodiv">
    <!-- 6.设置跳转的连接 --> 
    <router-link to="/index">index</router-link>
    <router-link to="/home">home</router-link>
    <router-link to="/phone">phone</router-link>
    <router-link to="/user">user</router-link>
    <!-- 5.设置路由显示位置 -->
    <router-view></router-view>
</div>
<template id="tema">
    <div>
        <p>indexindexindexindexindex</p>
    </div>
</template>
<template id="temb">
    <div>
        <p>homehomehomehomehome</p>
    </div>
</template>
<template id="temc">
    <div>
        <p>phonephonephonephonephonephone</p>
    </div>
</template>
<template id="temd">
    <div>
        <p>useruseruseruseruseruseruser</p>
    </div>
</template>
<template id="rprtem">
    <div>
        <p>不好意思当前页面正在维护请您稍后访问！！！</p>
    </div>
</template>
<script>
    //1.定义组件模板
    let tema = {
        template: "#tema"
    };
    let temb = {
        template: "#temb"
    };
    let temc = {
        template: "#temc"
    };
    let temd = {
        template: "#temd"
    };
    let rpr = {
        template: "#rprtem"
    }
    //2. 配置路由规则
    var routes = [{
            name: "index",
            path: "/index",
            component: tema
        },
        {
            name: "home",
            path: "/home",
            component: temb
        },
        {
            name: "phone",
            path: "/phone",
            component: temc
        },
        {
            name: "user",
            path: "/user",
            component: temd
        },
        // 必须放到最后面 同一个路径可以匹配多个路由，
        // 此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高
        {
            name: "rpr",
            path: "/*",
            component: rpr
        }
    ]
    //3.创建路由实例
    var router = new VueRouter({
        routes
    })

    new Vue({
        el: "#demodiv",
        data: {},
        //4.把路由对象传递给实例
        router
    })
</script>

案例：重定向

<div id="demodiv">
    <!-- 6.设置跳转的连接 -->
    <router-link to="/index">index</router-link>
    <router-link to="/home">home</router-link>
    <router-link to="/phone">phone</router-link>
    <router-link to="/user">user</router-link>
    <!-- 5.设置路由显示位置 -->
    <router-view></router-view>
</div>
<template id="tema">
    <div>
        <p>indexindexindexindexindex</p>
    </div>
</template>
<template id="temb">
    <div>
        <p>homehomehomehomehome</p>
    </div>
</template>
<template id="temc">
    <div>
        <p>phonephonephonephonephonephone</p>
    </div>
</template>
<template id="temd">
    <div>
        <p>useruseruseruseruseruseruser</p>
    </div>
</template>

<script>
    //1.定义组件模板
    let tema = {
        template: "#tema"
    };
    let temb = {
        template: "#temb"
    };
    let temc = {
        template: "#temc"
    };
    let temd = {
        template: "#temd"
    };

    //2.配置路由规则
    var routes = [{
            name: "index",
            path: "/index",
            component: tema
        },
        {
            name: "home",
            path: "/home",
            component: temb
        },
        {
            name: "phone",
            path: "/phone",
            component: temc
        },
        {
            name: "user ",
            path: "/user ",
            component: temd
        },
        {
            path: "/*",
            redirect: "/index"
        }
    ];
    //3.创建路由实例 
    var router = new VueRouter({
        routes
    })
    new Vue({
        el: "#demodiv",
        data: {},
        router
    })
</script>

路由扩展：二级路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html{
            font-size:26.67vw;
        }

        .footer {
            width: 100%;
            height: 0.5rem;
            background-color: gainsboro;
            position: fixed;
            bottom: 0px;
            font-size: 0.16rem;
            display: flex;
        }

        .footer a {
            flex: 1;
            text-align: center;
            line-height: 0.5rem;
            text-decoration: none;
        }
        div{
            font-size: 0.16rem;
        }

        .booker a{
            text-decoration: none;
        }
        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="demodiv">
        <!-- 一级路由出口 -->
        <router-view></router-view>
        <bottom-bar></bottom-bar>
    </div>
    <!-- 创建一级路由模板start -->
    <template id="tema">
        <div>
            首页
        </div>
    </template>
    <template id="temb">
        <div class="booker">
            书影音
            <!-- 设置二级路由的导航的时候在路径中必须加入一级路由 -->
            <router-link to="/book/dianying">电影</router-link>
            <router-link to="/book/dianshi">电视</router-link>
            <router-link to="/book/zongyi">综艺</router-link>
            <router-link to="/book/dushu">读书</router-link>
            <!-- 二级路由出口 -->
            <router-view></router-view>
        </div>
    </template>
    <template id="temc">
        <div>
            小组
        </div>
    </template>
    <template id="temd">
        <div>
            集市
        </div>
    </template>
    <template id="teme">
        <div>
            我的
        </div>
    </template>
    <!-- 创建一级路由模板end -->

    <!-- 声明式一级导航start -->
    <template id="bartem">
        <div class="footer">
            <router-link to="/index">首页</router-link>
            <router-link to="/book">书影音</router-link>
            <router-link to="/xiaozu">小组</router-link>
            <router-link to="/jishi">集市</router-link>
            <router-link to="/user">我的</router-link>
        </div>
    </template>
    <!-- 声明式一级导航end -->

    <!-- 二级路由的模板strat -->
    <template id="ertema">
        <div>
            <p>电影</p>
        </div>
    </template>
    <template id="ertemb">
        <div>
            <p>电视</p>
        </div>
    </template>
    <template id="ertemc">
        <div>
            <p>综艺</p>
        </div>
    </template>
    <template id="ertemd">
        <div>
            <p>读书</p>
        </div>
    </template>
    <!-- 二级路由的模板end -->

</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // 创建一级路由模板start
    let tema = {
        template: "#tema"
    };
    let temb = {
        template: "#temb"
    };
    let temc = {
        template: "#temc"
    };
    let temd = {
        template: "#temd"
    };
    let teme = {
        template: "#teme"
    };
    // 创建一级路由模板end

    // 设置二级路由模板start
    let ertema = {
        template: "#ertema"
    };
    let ertemb = {
        template: "#ertemb"
    };
    let ertemc = {
        template: "#ertemc"
    };
    let ertemd = {
        template: "#ertemd"
    };
    // 设置二级路由模板end

    //添加一级路由规则 start
    let routes = [{
            name: "index",
            path: "/index",
            component: tema
        },
        {
            name: "book",
            path: "/book",
            component: temb,
            //添加二级路由规则start
            children: [{
                    name: "dianying",
                    path: "dianying",
                    component: ertema
                },
                {
                    name: "dianshi",
                    path: "dianshi",
                    component: ertemb
                },
                {
                    name: "zongyi",
                    path: "zongyi",
                    component: ertemc
                },
                {
                    name: "dushu",
                    path: "dushu",
                    component: ertemd
                }
            ]
            //添加二级路由规则end
        },
        {
            name: "xiaozu",
            path: "/xiaozu",
            component: temc
        },
        {
            name: "jishi",
            path: "/jishi",
            component: temd
        },
        {
            name: "user",
            path: "/user",
            component: teme
        },
    ];
    //添加一级路由规则 end

    //创建路由实例start
    var router = new VueRouter({
        routes
    })
    //创建路由实例end

    new Vue({
        el: "#demodiv",
        data: {},
        //把路由对象传递给vue实例
        router,
        //创建局部组件，完成以及路由的声明式导航
        components: {
            "bottomBar": {
                template: "#bartem"
            }
        }
    })
</script>

运行效果：
在这里插入图片描述

路由扩展：三级路由

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html {
            font-size: 26.67vw;
        }

        .footer {
            width: 100%;
            height: 0.5rem;
            background-color: gainsboro;
            position: fixed;
            bottom: 0px;
            font-size: 0.16rem;
            display: flex;
        }

        .footer a {
            flex: 1;
            text-align: center;
            line-height: 0.5rem;
            text-decoration: none;
        }

        div {
            font-size: 0.16rem;
        }

        .booker a{
            text-decoration: none;
        }

        .sanmover a{
            text-decoration: none;
        }

        .router-link-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="demodiv">
        <!-- 一级路由出口 -->
        <router-view></router-view>
        <bottom-bar></bottom-bar>
    </div>
    <!-- 创建一级路由模板start -->
    <template id="tema">
        <div>
            首页
        </div>
    </template>
    <template id="temb">
        <div class="booker">
            书影音
            <!-- 设置二级路由的导航的时候在路径中必须加入一级路由 -->
            <router-link to="/book/dianying">电影</router-link>
            <router-link to="/book/dianshi">电视</router-link>
            <router-link to="/book/zongyi">综艺</router-link>
            <router-link to="/book/dushu">读书</router-link>
            <!-- 二级路由出口 -->
            <router-view></router-view>
        </div>
    </template>
    <template id="temc">
        <div>
            小组
        </div>
    </template>
    <template id="temd">
        <div>
            集市
        </div>
    </template>
    <template id="teme">
        <div>
            我的
        </div>
    </template>
    <!-- 创建一级路由模板end -->

    <!-- 声明式一级导航start -->
    <template id="bartem">
        <div class="footer">
            <router-link to="/index">首页</router-link>
            <router-link to="/book">书影音</router-link>
            <router-link to="/xiaozu">小组</router-link>
            <router-link to="/jishi">集市</router-link>
            <router-link to="/user">我的</router-link>
        </div>
    </template>
    <!-- 声明式一级导航end -->

    <!-- 声明式二级导航start -->
    <template id="santem">
        <div class="sanmover">
            <router-link to="/book/dianying">电影</router-link>
            <router-link to="/book/dianshi">电视</router-link>
            <router-link to="/book/zongyi">综艺</router-link>
            <router-link to="/book/dushu">读书</router-link>
        </div>
    </template>
    <!-- 声明式二级导航end -->

    <!-- 二级路由的模板strat -->
    <template id="ertema">
        <div>
            <p>电影
                <router-link to="/book/dianying/one">速1</router-link>
                <router-link to="/book/dianying/two">速2</router-link>
                <router-link to="/book/dianying/three">速3</router-link>
                <router-link to="/book/dianying/four">速4</router-link>
                <!-- 三级路由出口 -->
                <router-view></router-view>
            </p>
        </div>
    </template>
    <template id="ertemb">
        <div>
            <p>电视</p>
        </div>
    </template>
    <template id="ertemc">
        <div>
            <p>综艺</p>
        </div>
    </template>
    <template id="ertemd">
        <div>
            <p>读书</p>
        </div>
    </template>
    <!-- 二级路由的模板end -->

    <!-- 三级路由的模板strat -->
    <template id="santema">
        <div>
            <p>速1</p>
        </div>
    </template>
    <template id="santemb">
        <div>
            <p>速2</p>
        </div>
    </template>
    <template id="santemc">
        <div>
            <p>速3</p>
        </div>
    </template>
    <template id="santemd">
        <div>
            <p>速4</p>
        </div>
    </template>
    <!-- 三级路由的模板end -->

</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // 创建一级路由模板start
    let tema = {
        template: "#tema"
    };
    let temb = {
        template: "#temb"
    };
    let temc = {
        template: "#temc"
    };
    let temd = {
        template: "#temd"
    };
    let teme = {
        template: "#teme"
    };
    // 创建一级路由模板end

    // 设置二级路由模板start
    let ertema = {
        template: "#ertema"
    };
    let ertemb = {
        template: "#ertemb"
    };
    let ertemc = {
        template: "#ertemc"
    };
    let ertemd = {
        template: "#ertemd"
    };
    // 设置二级路由模板end

    // 设置三级路由模板start
    let santema = {
        template: "#santema"
    };
    let santemb = {
        template: "#santemb"
    };
    let santemc = {
        template: "#santemc"
    };
    let santemd = {
        template: "#santemd"
    };
    // 设置三级路由模板end

    //添加一级路由规则 start
    let routes = [{
            name: "index",
            path: "/index",
            component: tema
        },
        {
            name: "book",
            path: "/book",
            component: temb,
            //添加二级路由规则start
            children: [{
                    name: "dianying",
                    path: "dianying",
                    component: ertema,
                    // 添加三级路由规则start
                    children: [{
                            name: "one",
                            path: "one",
                            component: santema
                        },
                        {
                            name: "two",
                            path: "two",
                            component: santemb
                        },
                        {
                            name: "three",
                            path: "three",
                            component: santemc
                        },
                        {
                            name: "four",
                            path: "four",
                            component: santemd
                        },
                    ]
                    // 添加三级路由规则end
                },
                {
                    name: "dianshi",
                    path: "dianshi",
                    component: ertemb
                },
                {
                    name: "zongyi",
                    path: "zongyi",
                    component: ertemc
                },
                {
                    name: "dushu",
                    path: "dushu",
                    component: ertemd
                }
            ]
            //添加二级路由规则end
        },
        {
            name: "xiaozu",
            path: "/xiaozu",
            component: temc
        },
        {
            name: "jishi",
            path: "/jishi",
            component: temd
        },
        {
            name: "user",
            path: "/user",
            component: teme
        },
    ];
    //添加一级路由规则 end

    //创建路由实例start
    var router = new VueRouter({
        routes
    })
    //创建路由实例end

    new Vue({
        el: "#demodiv",
        data: {},
        //把路由对象传递给vue实例
        router,
        //创建局部组件，完成以及路由的声明式导航
        components: {
            "bottomBar": {
                template: "#bartem",
                components: {
                    "sanBar": {
                        template: "#santem"
                    }
                }
            }
        }
    })
</script>

运行效果：

在这里插入图片描述