通过字符串从数组中删除多个对象答案

【问题标题】：Removing more than one object from array by string通过字符串从数组中删除多个对象
【发布时间】：2020-11-22 16:27:55
【问题描述】：

我正在尝试实现一个从 Vue Router 原生 $router 对象生成其内容的侧边栏。

因此它遍历路由数组中存在的所有路由。但是，我想排除那些我不想在我的菜单中显示的内容。

我尝试了不同的方法，但没有按预期工作。请看下面我现在拥有的：


<template>
    <div class="three cols card card-content">
        <aside class="sidebar">
          <h6 class="sidebar-label">Navigate</h6>
          <ul class="sidebar-list">
            <li><router-link to="/"><i class="ico ri-home-4-line"></i>Home</router-link></li>
            <li><router-link to="/"><i class="ico ri-swap-box-line"></i>Changelog <i class="medal bg-salmon text-white"> v.1.0 Beta</i></router-link></li>
            <li><router-link to="/"><i class="ico ri-question-line"></i>Getting Started</router-link></li>
          </ul>

          <h6 class="sidebar-label">Documentation</h6>
          <ul class="sidebar-list">
            <li v-for="route in routes" :key="route"><router-link :to="route.path">{{route.name}}</router-link></li>
          </ul>
        </aside>
      </div>
</template>

<script>
export default {
     created() {
       //this iterates trough all the routes in order to implement the sidebar menu
        const router = this.$router.getRoutes()

       router.forEach(route => this.routes.push({
                name: route.name, 
                path: route.path
            }));

        //this will remove any specific unwanted routes from the menu
        this.routes = this.routes.splice((route) => route.name ==! "Home" && route.name ==! "Table of Contents")
       },
    data(){
        return{
            routes: []
        }
    },
}
</script>

任何帮助将不胜感激，

问候， T.

【问题讨论】：

标签： javascript vue.js vue-router vuejs3

【解决方案1】：

您可以使用 map/filter 方法并将 ==! 替换为 !== ：

     created() {
       //this iterates trough all the routes in order to implement the sidebar menu
        const router = this.$router.getRoutes()

    this.routes = router.map(route => ({
                name: route.name, 
                path: route.path
            }));

        //this will remove any specific unwanted routes from the menu
        this.routes = this.routes.filter((route) => route.name !== "Home" && route.name !== "Table of Contents")
       },
    data(){
        return{
            routes: []
        }
    },

更好的解决方案是将路由定义为计算属性：

computed:{
   routes(){
       return this.$router.getRoutes().map(route => ({
                name: route.name, 
                path: route.path
            })).filter((route) => route.name !== "Home" && route.name !== "Table of Contents")
  }
},
created(){

},
data(){
  return{}
}

【讨论】：

【解决方案2】：

最简单的解决方案是：

const filteredRoutes = [
'Home',
'Table of Contents'
];

this.routes = this.routes.filter(route => !filteredRoutes.includes(route.name));

【讨论】：

【解决方案3】：

你能做这样的事情吗？

// Define array of unwanted routes
const unwantedRoutes = ["Home", "Table of Contents"]

export default {
   data(){
      return{
      //  Set routes to empty array
      routes: []
      }
   },
   created() {
      // Get vue router routes
      const routerRoutes = this.$router.getRoutes()

      // Extract only routes which name is not added to the unwantedRoutes array
      const wantedRoutes = routerRoutes.filter(({ name }) => !unwantedRoutes.includes(name))

      // set routes to array that contains objects with only name and the path from each wanted route
      this.routes = wantedRoutes.map(({ name, path }) => ({ name, path }));
   },
}

【讨论】：