Skip to content

B
beyond-clouds-front
Commit 0c6e022b by 高浩杰
Options

路由改进

parent 4ef76bb6
Showing with 221 additions and 35 deletions
components/pc/nav/navCard.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
class="nav-card__label" class="nav-card__label"
:style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}" :style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
></div> ></div>
<nuxt-link tag="p" :to="navAddress" :style="{color:fontColor}"> <nuxt-link tag="p" :to="{path:navAddress, query:{id:labelId}}" :style="{color: isBlue||fontColor ? '#00AAE6' : '#666'}">
<slot></slot> <slot></slot>
</nuxt-link> </nuxt-link>
<div class="nav-card__menu" v-if="isShow===true && childList !== undefined" @mouseleave="handleMouseLeave"> <div class="nav-card__menu" v-if="isShow===true && childList !== undefined" @mouseleave="handleMouseLeave">
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<nuxt-link <nuxt-link
class="label-list" class="label-list"
v-for="(item, key) in childList" v-for="(item, key) in childList"
:key="`${item}${key}`" :to="item.address"> :key="`${item}${key}`" :to="{path: item.address, query: {id: labelId, childId: item.childId}}">
{{item.label}} {{item.label}}
</nuxt-link> </nuxt-link>
</div> </div>
...@@ -30,11 +30,12 @@ export default { ...@@ -30,11 +30,12 @@ export default {
name: "navCard", name: "navCard",
props: { props: {
childList: Array, childList: Array,
navAddress: String navAddress: String,
labelId: String
}, },
data(){ data(){
return{ return{
fontColor: '#666', fontColor: false,
bgColor: '#fff', bgColor: '#fff',
isShow: false, isShow: false,
isBlue: false isBlue: false
...@@ -43,22 +44,32 @@ export default { ...@@ -43,22 +44,32 @@ export default {
methods:{ methods:{
handleMouseLeave(){ handleMouseLeave(){
this.isShow=false; this.isShow=false;
this.fontColor = '#666'; this.fontColor = false;
}, },
handleMouseOver(){ handleMouseOver(){
this.isShow=true; this.isShow=true;
this.fontColor = '#00AAE6'; this.fontColor = true;
} }
}, },
watch:{ watch:{
$route(to,from){ $route(to,from){
this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1; if (this.$route.query.id) {
this.isBlue = this.$route.query.id.indexOf(this.labelId) !== -1;
} else {
this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1;
}
} }
}, },
created() { created() {
console.log(this.$route.path); console.log(this.$route.query.id);
if (this.$route.path.indexOf(this.navAddress) !== -1){ if (this.$route.query.id) {
this.isBlue = true; if (this.$route.query.id.indexOf(this.labelId) !== -1){
this.isBlue = true;
}
} else {
if (this.$route.path.indexOf(this.navAddress) !== -1){
this.isBlue = true;
}
} }
} }
} }
...@@ -84,6 +95,10 @@ export default { ...@@ -84,6 +95,10 @@ export default {
> p{ > p{
width: 100%; width: 100%;
padding-left: 14*$length; padding-left: 14*$length;
@extend %animate-transition;
&:hover{
color: #00AAE6;
}
.nav-card__label2{ .nav-card__label2{
margin-left: 14*$length; margin-left: 14*$length;
background-color: #fff; background-color: #fff;
......
components/pc/nav/navWrap.vue
...@@ -4,13 +4,16 @@ ...@@ -4,13 +4,16 @@
v-for="(item,index) in list" v-for="(item,index) in list"
:key="item.address" :key="item.address"
:navAddress="item.address" :navAddress="item.address"
:labelId="item.id"
:childList="item.childList" :childList="item.childList"
>{{item.label}}</nav-card> >{{item.label}}
</nav-card>
</div> </div>
</template> </template>
<script> <script>
import NavCard from './navCard'; import NavCard from './navCard';
export default { export default {
name: "navWrap", name: "navWrap",
components: { components: {
...@@ -21,20 +24,20 @@ export default { ...@@ -21,20 +24,20 @@ export default {
width: String, width: String,
height: String height: String
}, },
data(){ data() {
return{ return {
color: ''
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-wrap{ .nav-wrap {
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
padding-top: 21*$length; padding-top: 21*$length;
padding-bottom: 74*$length; padding-bottom: 74*$length;
@include border-radius(4*$length); @include border-radius(4*$length);
} }
</style> </style>
pages/answer/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<card-container <card-container
width="816px" width="816px"
height="1012px" height="1012px"
title="程序人生" :title="labelTitle"
> >
<answer-card card-type="2"></answer-card> <answer-card card-type="2"></answer-card>
</card-container> </card-container>
...@@ -74,11 +74,40 @@ export default { ...@@ -74,11 +74,40 @@ export default {
return{ return{
list: [ list: [
{ {
label: '全部类型', label: '热门推荐',
address: '/answer' address: '/answer',
id: '热门推荐'
},
{
label: '职业生涯',
address: '/answer',
id: '职业生涯'
},
{
label: '项目讨论',
address: '/answer',
id: '项目讨论'
},
{
label: '职场经验',
address: '/answer',
id: '职场经验'
} }
] ]
} }
},
created() {
this.$router.replace({
path: '/answer',
query: {
id: '热门推荐'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id
}
} }
} }
</script> </script>
......
pages/blog/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<card-container <card-container
width="816px" width="816px"
height="1012px" height="1012px"
title="程序人生" :title="labelTitle"
> >
<project-card></project-card> <project-card></project-card>
<project-card></project-card> <project-card></project-card>
...@@ -56,10 +56,44 @@ export default { ...@@ -56,10 +56,44 @@ export default {
list: [ list: [
{ {
label: '全部类型', label: '全部类型',
address: '/blog' address: '/blog',
id: '全部类型'
},
{
label: '程序人生',
address: '/blog',
id: '程序人生'
},
{
label: '移动开发',
address: '/blog',
id: '移动开发'
},
{
label: '前端',
address: '/blog',
id: '前端'
},
{
label: '其他',
address: '/blog',
id: '其他'
} }
] ]
} }
},
created() {
this.$router.replace({
path: '/blog',
query: {
id: '全部类型'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id
}
} }
} }
</script> </script>
......
pages/project/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<card-container <card-container
width="816px" width="816px"
height="1012px" height="1012px"
title="人工智能" :title="labelTitle"
> >
<project-card></project-card> <project-card></project-card>
<project-card></project-card> <project-card></project-card>
...@@ -57,16 +57,93 @@ export default { ...@@ -57,16 +57,93 @@ export default {
return{ return{
list: [ list: [
{ {
label: '全部类型', label: '全部项目',
address: '/project' address: '/project',
id: '全部项目'
},
{
label: 'web应用',
address: '/project',
id: 'web应用',
childList: [
{
address: '/project',
label: '桌面应用',
childId: '桌面应用'
},
{
address: '/project',
label: '手机APP',
childId: '手机APP'
},
{
address: '/project',
label: '实时聊天',
childId: '实时聊天'
},
{
address: '/project',
label: '快速开发',
childId: '快速开发'
}
]
},
{
label: '基础框架',
address: '/project',
id: '基础框架',
childList: [
{
label: 'Vue.js',
address: '/project',
childId: 'Vue.js'
}
]
},
{
label: '应用工具',
address: '/project',
id: '应用工具',
childList: [
{
label: '文件管理工具',
address: '/project',
childId: '文件管理工具'
},
{
label: '文本编辑',
address: '/project',
childId: '文本编辑'
}
]
} }
] ]
} }
},
created() {
this.$router.replace({
path: '/project',
query: {
id: '全部项目'
}
});
},
computed: {
labelTitle: function () {
if (this.$route.query.childId) {
return this.$route.query.id + ' · ' + this.$route.query.childId
} else {
return this.$route.query.id
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .nuxt-link-exact-active {
color: #00AAE6 !important;
}
.project-container{ .project-container{
> .project-container__main{ > .project-container__main{
width: $pageWidth; width: $pageWidth;
......
pages/topic/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<card-container <card-container
width="816px" width="816px"
height="1070px" height="1070px"
title="热门话题" :title="labelTitle"
> >
<topic-card></topic-card> <topic-card></topic-card>
</card-container> </card-container>
...@@ -47,10 +47,39 @@ export default { ...@@ -47,10 +47,39 @@ export default {
list: [ list: [
{ {
label: '推荐', label: '推荐',
address: '/topic' address: '/topic',
id: '推荐'
},
{
label: '热门',
address: '/topic',
id: '热门'
},
{
label: '关注',
address: '/topic',
id: '关注'
},
{
label: '最新',
address: '/topic',
id: '最新'
} }
] ]
} }
},
created() {
this.$router.replace({
path: '/topic',
query: {
id: '推荐'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id + '话题'
}
} }
} }
</script> </script>
......
pages/web.vue
...@@ -52,15 +52,14 @@ export default { ...@@ -52,15 +52,14 @@ export default {
} }
] ]
} }
},
created() {
this.$router.replace('/web/about')
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .nuxt-link-exact-active {
color: #00AAE6 !important;
}
.web-container { .web-container {
.web-center { .web-center {
width: $pageWidth; width: $pageWidth;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment