项目重温 _ 查漏补缺-CFANZ编程社区

路由跳转之编程式导航

编程式导航就是 通过 js 来实现路由跳转

动态路由传参

路由配置：

{
  path: '/update/:uid/:name',    // uid 参数、name 参数
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};

路由跳转：

this.$router.push('/update/123/zhangsan');    
// 如果没有添加对应参数，页面出现 404，不会到达对应页面

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    // 进行网络请求...
}

query 方式传参

路由配置：

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};

路由跳转(两种方式)：

this.$router.push({
    path : '/update',        // 方式1：通过 path 跳转
    query : {
        uid : 123,
        name : 'zhangsan'
    }
})
 
 
this.$router.push({
    name : 'Update',        // 方式2：通过 name 跳转
    query : {
        uid : 456,
        name : 'lisi'
    }
})

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.query.uid;
    let name = this.$route.query.name;
 
    // 进行网络请求...
}

params 方式传参

路由配置：

{
  path: '/update',    
  name: 'Update',
  component: () => import('@/views/update.vue'),
  children : []
};

路由跳转(只有一种方式)：

this.$router.push({
    name : 'Update',        // 只能通过 name 跳转
    params : {
        uid : 1313,
        name : 'love'
    }
})

在对应页面中拿到路由参数进行网络请求：

mounted(){
    let id = this.$route.params.uid;
    let name = this.$route.params.name;
 
    // 进行网络请求...
}

src / router / routes / edit.js

export default {
  path: '/edit',
  name: 'Edit',
  component: () => import(/* webpackChunkName: "edit" */ '@/views/edit')
}

src / views / list / component / allMattersTab.vue ( 子组件 )

// 项目中所用
// elementUI 中的 MessageBox 弹框
// . . . 省略 . . .
.then(({ value }) => {
  this.$message({
    type: 'success',
    message: `${value}创建成功`
  })
  // 动态路由传参
  // this.$router.push(`/edit/${value}`)
  
  // 跳转页面时 （ 通过 query 属性传值 ）
  this.$router.push({
    path: 'edit',
    query: {
      title: value
    }
  })

  // 跳转页面时 （ 通过 params 方式隐士传参 ）
  /* this.$router.push({
    name: 'Edit',
    params: {
      title: value
    }
  }) */
})
.catch(() => {
  this.$message({
    type: 'info',
    message: '取消新建'
  })
})

src / views / edit / index.vue

<template>
  <div>
    <el-input
      class="input_title"
      v-model="edit_title"
      placeholder="请输入问卷标题"
  </div>
</template>

<script>
export default {
  data() {
    return {
      edit_title: '问卷标题'，   // 绑定输入编辑框初始内容
    }
  }，
  created() {
    this.edit_title = this.$route.query.title
    // this.edit_title = this.$route.params.title
  }
}
</script>

组件间传值

事件总线

非父子组件或更多层级间组件间传值，在 Vue 中通过单独的事件中心来管理组件间的传值。

建立统一的事件中心

Vue 兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作

方法：eventBus 事件总线传值

思路：在 Vue 的原型（ prototype ）上创建一个属性 eventBus ，该属性的值为 new Vue（），即 eventBus 也是一个 Vue 实例

第一步：在 src / main.js 中创建 eventBus 事件总线

// 创建 eventBus 事件总线
Vue.prototype.eventBus = new Vue()

第二步：在子组件 A 中，通过 eventBus 事件总线抛出信息和值。this.eventBus 就是 Vue 实例，$emit 也是上面的方法

src / views / edit / components / parameter.vue ( 关于参数的子组件 )

<template>
  <!-- 右侧参数配置项 -->
  <div>
    <!-- 是否为必答项 -->
    <el-form-item
      v-if="Object.keys(data).indexOf('validate') >= 0"
      label="必答"
    >
      <div v-for="(item, idx) in data.validate" :key="idx">
        <el-switch
          v-model="item.required"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="isRequired(data)"
        />
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }，
  methods: {
    // 控制是否为必答项
    isRequired(boo) {
      // 利用 eventBus 事件总线传值
      if(boo.type == 'radio') {
        this.eventBus.$emit('radio', boo.validate[0].required)
      } else if (boo.type == 'checkbox') {
        this.eventBus.$emit('checkbox', boo.validate[0].required)
      } else if (boo.type == 'input') {
        this.eventBus.$emit('input', boo.validate[0].required)
      } else {
        console.log('假 boo' + boo)
      }
    }
  }
}
</script>

第三步：在子组件 B 中，在 created 或 mounted 等生命周期函数上，监听那个事件和获取那个值。