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

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

怎么写,

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

列举个反面教材:

结构部分⬇️

    

        
Home
        
Flowers
        
Photography
        
Technology
    

js部分⬇️

 methods: {


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

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

  }

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

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

js部分,

methods: {

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


  }

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