|
导航栏中有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)
}
}
节省了很多行代码,不亦乐乎! | 
转播
