now needs to do operation loading on the same page, considering that router is not necessary, bind it through v-show. On the left side of
is another component, leftbar.vue. Click and route to another page. Click on the left column to refresh.
right column code
<template>
<div class="rightBar">
<p class="rightBar-nav">
<a href="-sharp"></a>
<span>></span>
<a href="-sharp">{{ this.$route.query.name }}</a>
<div class="newsList-con" v-for="item in news" v-show="item.id == cate_id & !vshow" :key="item.id">
<dl class="newsList" v-for="item in item.dataList" :key="item.id">
<dt><a href="javascript：;" @click="showNextPage">{{ item.title }}</a></dt>
<dd>{{ item.txt }}</dd>
</dl>
</div>
<div class="newsList-child" v-show="vshow">
sss
</div>
</div>
</template>
<script>
import axios from "axios"
export default{
props:["vshow"],
data () {
return {
news: [],
ok: false,
vshow: false,
cate_id: 1
}
},
mounted: function () {
axios.get("static/data/dataBase.json")
.then((res) => {
console.log(res)
this.news = res.data.dataTxt
if (this.$route.query.id) {
this.cate_id = this.$route.query.id
}
})
.catch((err) => {
console.log(err)
})
},
methods: {
showNextPage: function () {
this.vshow = !this.vshow
}
},
watch: {
"$route" (to, from) {
this.cate_id = this.$route.query.id
}
}
}
</script>