当用户导航到特定路径路径时更新父数据

Posted 2023-02-23

【中文标题】当用户导航到特定路径路径时更新父数据

【英文标题】：Update the parent data when user navigates to a specific route path

【发布时间】：2019-11-16 14:51:44

【问题描述】：

我是 VueJs 的新手，正在尝试使用 Vue-route 设置 Web 应用程序，并且希望在用户导航到特定 URL 时更新 <header> 样式，无论是直接使用“URL 栏”还是“导航栏” ”。在这种情况下，我们有一个父组件，其中包含height_status 数据和模板上的一些<router-links>。

我已经使用$emit 技术完成了“导航栏”部分，它运行良好，但后来我尝试在created 生命周期挂钩上使用它，以便在/home 路由时更新标题创建但事件监听器不会到达 parent_component。 我该如何解决这个问题？有没有更好的方法来做到这一点？ 请看下面的代码：

父组件.vue

<template>
  <div id="app">

    <router-link to="/home" @height_size_ctrl="change_height">Home</router-link>
    <router-link to="/about">About us</router-link>
    <router-link to="/contact">Contact us</router-link>

    <header :class="height_status ? 'head-h-s' : 'head-h-m'"></header>

    <router-view/>

  </div>
</template>

<script>
export default 
  name: "Parent_component"
  ,
  data() 
    return 
      height_status: false
    
  ,
  methods: 
    change_height(h) 
      this.height_status = h
    
  

</script>

---

router.js

Vue.use(Router)

export default new Router(
  routes: [
    
      path: '/home',
      name: 'home',
      component: Home
    ,
    
      path: '/about',
      name: 'about',
      component: about
    ,
    
      path: '/contact',
      name: 'contact',
      component: contact
    
  ]
)

---

home.vue

<template>
  <h1>hello</h1>
</template>

<script>

export default 
  name: 'home',
  created: function()
    return this.$emit("height_size_ctrl", true)
  

</script>

【参考方案1】：

您也可以更改路由器：

router.js

  
    path: '/home',
    name: 'home',
    component: Home,
    meta: 
      headerClass: 'head-h-s'
    
  

在你的组件中

Parent_component.vue

computed: 
  headerClass() 
    return this.$route.meta.headerClass
  

现在 headerClass 在模板中可用。

<header :class="headerClass"></header>

【参考方案2】：

为什么不尝试在route 或route name 上进行类绑定，例如：

<div :class="'height_status': this.$route == '/home'">Header</div>

或

<div :class="'height_status': this.$route.name == 'Home'">Header</div>

【讨论】：

好主意，类绑定是正确的答案，但这种情况对我不起作用，因为类名称为head-h-s 和head-h-m。 this.$route 也可能类似于 this.$route.path，具体取决于条件。所以我编辑了你的答案以匹配问题。谢谢@kcsujeet

【参考方案3】：

正如@kcsujeet 所说，类绑定是我们可以做到这一点的好方法。在这种情况下，我们需要查看条件this.$route.path。如果值等于/home，则选择'head-h-m，否则选择.head-h-s。

<header class="head-sec" :class=" this.$route.path == '/home' ? 'head-h-m' : 'head-h-s'">

我们还可以使用this.$route 访问其他route 定义的属性。我建议看一下router.js 文件。

routes: [
    
      path: '/home',
      name: 'home',
      component: Home