逆向传值与路由

左手的ㄟ右手 2021-07-24 16:47 436阅读 0赞

# 逆向传值 #

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

操作步骤：

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

<div id="demodiv">
        <fu></fu>
    </div>
    <template id="futem">
        <div>
            <p>我是父组件</p>
            
            <zi :text="futext" @zipao="fufun"></zi>
        </div>
    </template>
    <template id="zitem">
        <div>
            <p>我是子组件^_-_^{
       {text}}</p>
            
            <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. 路由的作用 ##

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

## 2. 路由原理 ##

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

## 3. 路由功能引入 ##

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

## 4. 一级路由配置 ##

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

1.  定义 (路由) 组件。

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>

1.  定义路由  
    *使用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 //键值相同只写一个
    })

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

<router-view></router-view>

1.  设置跳转的连接  
    **使用< 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">
        
        <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>
        
        <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

*注意：*

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

## 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. 编程式的导航 ##

1.  之前已经使用js方式进行跳转路由–这种方式被称之为编程式导航
2.  使用router-link进行跳转路由–称之为声明式
3.  扩展路由跳转方式：router.replace（）替换
4.  与push（）唯一的不同就是，它不会向 历史url记录中添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
5.  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">
            
            <button @click="fun(1)">点我使用push跳转到phone</button>
            <button @click="fun(2)">点我使用replace跳转到user</button>
             
            <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. 捕获所有路由 ##

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

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

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

<div id="demodiv">
         
        <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>
        
        <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">
        
        <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>
        
        <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>

路由扩展：二级路由

运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]

路由扩展：三级路由

<!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>
        
        <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>
        
    
        
        <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>
        
    
        
        <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>
        
    
        
        <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>
        
    
        
        <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>
        
    
    </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>

运行效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70]: /images/20210724/623766eb407a427fb49a1bf2044de016.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjAwMTg1_size_16_color_FFFFFF_t_70 1]: /images/20210724/351681c1e6a74a4e9dc84e7d41335af2.png