vue2.0路由及兄弟组件通信

最新推荐文章于 2024-10-04 20:01:03 发布

shunchenggong

最新推荐文章于 2024-10-04 20:01:03 发布

阅读量3.1k

点赞数

分类专栏： vue2.0 vue 框架文章标签： vue-js

本文链接：https://blog.csdn.net/shunchenggong/article/details/78002438

版权

本文详细介绍了在Vue2.0中如何实现路由功能，包括路由的引入、配置和组件的显示。此外，还讲解了兄弟组件间通信的方法，通过创建一个中间的Vue实例作为事件总线，利用$emit和on实现信息传递。最后，讨论了在路由切换时如何初始化数据，提供了两种策略供选择，并展示了实际项目中的应用示例。

摘要由CSDN通过智能技术生成

最近在学习用vue2.0进行项目的开发，由于接手项目的时候，项目的完整架构已经搭建完毕，为了不破坏之前的项目，我就采用了比较古老的写法，说实话不采用es6的语法去写，有好多事情都变得比较麻烦了，不过原理还是一样的，之前有写过父与子和子与父之间的通信，这次主要说的是兄弟组件的通信及vue路由的使用。
项目实景如下：

按照路由—-组件通信 —— 路由切换时的数据加载方式来进行剖析，嘎嘎我都不好生意用这个词，嘿嘿，希望你能学到东西
一、路由
概念：vue中的路由允许我们通过不同的 URL 访问不同的内容看，针对我刚刚贴的图来说。也就是我每次切换tab时，由于tab对应的url都不同，就可以通过url来找到对应展示的页面。
那完成一个路由功能只需要如下步骤：
1、引入vue-router,可以通过npm进行下载，在按照如下方式进行引入

<script type="text/javascript" src="../../resource/static/vue-router.js"></script>

2.html页面上进行如下定义
(1)、路由切换的入口，点击就会触发路由事件（暂且这么说><）

   <div class=" b1">
        <router-link   to="/group">派单分组</router-link>
        <router-link to="/rule">派单规则</router-link>
        <router-link to="/extend">派单规则扩展</router-link>
   </div>

vue官网解释：<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
（2）路由触发之后，对应的页面展示
<router-view></router-view>，对，只需要将这个标签放到你需要放到的地方，就可以看到路由展示的页面，即对应图中的那个最大的矩形框。
官方解释：<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。这就意味着路由的展示是以组件的形式进行的
(3)、定义路由的三个组件(即与tab项一一对应的)

 <template id="group">  
      ......你的代码
    </template>
   <template id="rule">  
     ......你的代码
   </template>
   <template id="extend">  
     ......你的代码
   </template>

3.js页面需要进行如下定义
(1) 定义进行展示的的三个路由组件（即展示在router-view中的页面）

var groups =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
   
         return{
          }
     }
  }）
 var rules =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
   
         return{
          }
     }
  }）
 var extends =  Vue.component('group',{
       template:'#group',//对应html页面的模板
        data:function(){
   
         return{
          }
     }
  }）
(2).//进行路由配置
   //配置路由
    var routes = [ 
        {path:'/group', component :groups},
        {path:'/rule', component:rules},
        {path:'/extend',component:extends},
        //重定向
        {path:'*',redirect:'/group'}
     ]
     //生成路由实例
    var router = new VueRouter({
        routes
    })

其中path匹配的是router-link to后面对应的路径
component 对应的即是该路径下需要在展示的组件
然后将这些配置挂载在路由实列上
(3).将配置好的路由实列挂载在页面上

var routerApp =  new Vue({
        el:"#ruleApp",
        router,
        data:{
         }
    })

ok进行以上三个步骤之后就搭建好了路由的基本功能了，搭建完成后可以跳转，那怎么进行数据的通信了，不急，我先把接下来的概念介绍了，最后在来讲实际项目中该如何处理路由之间数据的交互….
二组件间的通信
如果要实现点击分页组件或在搜素框中输入内容就能展示对应的页面信息，由于我将这几个不同的功能划分为不同的组件，而这几个组件的关系是平行的，就是所谓的兄弟组件（这个和在dom元素中定义兄弟元素是一个道理），所以要想实现上面的功能，就需要掌握兄弟组件的通信方法，按照习惯一步一步来看
(1)掌握 vm. $on 、vm.$ emit的概念
vm. $on：监听当前实例上的自定义事件。事件可以由vm.$ emit触发。回调函数会接收所有传入事件触发函数的额外参数。可以理解为信息的接收源。
vm.