小招数之Vue中导航栏路由跳转问题

导航栏中有n多个可以跳转页面选项,

怎么写,

才可以避免同类功能代码的堆砌?

列举个反面教材:

结构部分⬇️

    <div class="selections">
        <div @click="toHome('Home')">Home</div>
        <div @click="toFlowers('Flowers')">Flowers</div>
        <div @click="toPhotography('Photography')">Photography</div>
        <div @click="toTechnology('Technology')">Technology</div>
    </div>

js部分⬇️

 methods: {


    // 这么写 ,编辑器都嫌你烦

    toHome(){
         this.$router.push('/')
    },
    toFlowers(){
         this.$router.push('/Flowers')
    },
    toPhotography(){
         this.$router.push('/Photography')
    },
    toTechnology(){
         this.$router.push('/Technology')
    },
    
    

  }

是时候,亮出你的刷子了~~~

视图部分,写入一个共同的方法,变化的是作为参数的路径名称,如下⬇️

<template>


     <div class="selections">

        <div @click="skip('Home')">Home</div>
        <div @click="skip('Flowers')">Flowers</div>
        <div @click="skip('Photography')">Photography</div>
        <div @click="skip('Technology')">Technology</div>
       
     </div>

</template>

js部分,

methods: {

    // 路由跳转的巧妙方法
    // 一个方法解决集体问题
    skip (val) {
      this.$router.push('/' + val)
    }


  }

节省了很多行代码,不亦乐乎!