逆向传值与路由

逆向传值

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

操作步骤：

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

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

路由配置

传统页面跳转:使用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属性更加方便

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

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

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

index
home
phone
user

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

    
    index
    home
    phone
    user
    
    





 

注意要引入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，通过编程的方式导航：

    
    
    
    



    

        
        点我使用push跳转到phone
        点我使用replace跳转到user
         
        
    

    

    

    

    

7. 捕获所有路由

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

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

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

 

     
    index
    home
    phone
    user
    
    

案例：重定向

    
    index
    home
    phone
    user
    
    

路由扩展：二级路由

运行效果：

路由扩展：三级路由

运行效果：