At present, the gourmet hero project has reached the white hot stage. I feel that the more I write, the more energetic and interesting I write. For a developer, the happiest thing is to write some satisfactory results.
Today's sharing is connected to the previous personal information page. The first half has been mentioned earlier. Today's sharing is the function of the second half (taking others' space as an example, their own space is roughly the same). There are not many general things, but the two old words do not pay attention to the details, as shown in the figure above
Today's task is to deal with the functions and details of the frame in the above two pictures...
General introduction:
1. Firstly, the above tab functions are realized by tab switching, which is realized by secondary routing.
2. Render different data into the same template according to the switching of routes.
tab switch
First, configure the route to display the default components when entering the personal space. Here, use the route redirection, and then configure the secondary route to change different components during tab switching:
{
path:'/space',
name:'space',
component:() => import ('@/views/user-space/space'),
redirect:'/space/works',
children:[
{
path:'works',
name:'works',
component: () => import('@/views/user-space/menu-list'),
meta: {
login: true
}
},
{
path: 'fans',
name: 'fans',
meta: {
login: true
},
component: () => import('@/views/user-space/fans')
},
{
path: 'following',
name: 'following',
meta: {
login: true
},
component: () => import('@/views/user-space/fans')
},
{
path: 'collection',
name: 'collection',
meta: {
login: true
},
component: () => import('@/views/user-space/menu-list')
},
]
},The default component displayed at this time is my work component. The routing information is displayed as
Because some data needs to be initialized when the page is loaded, you need to use the watch attribute to listen for routing changes. The first is to observe your own space or someone else's space, and the second is to load the default secondary routing component
watch:{
$route:{
async handler(){
let {userId} = this.$route.query
//Here, the routing parameters are used to determine whether it is yourself or others
this.isMyself = !userId || userId === this.$store.state.userInfo.userId
//Different data acquisition methods are adopted according to the owner
if(this.isMyself){
this.userInfo = this.$store.state.userInfo
}else{
const data = await userInfo({userId})
this.userInfo = data.data
}
//Render the upper secondary route to the page
this.activeName = this.$route.name
this.getInfo()
},
//It will turn on automatically
immediate:true
}
},Here, the element UI is adopted to realize the specific tab switching. The v-model is used to obtain the switching value, and then the secondary components are switched according to the route. Therefore, the benefits of the same name and route can be seen
<el-tabs class="user-nav" v-model="activeName" @tab-click="tabClickHandler">
<el-tab-pane label="works" name="works"></el-tab-pane>
<el-tab-pane label="fans" name="fans"></el-tab-pane>
<el-tab-pane label="follow" name="following"></el-tab-pane>
<el-tab-pane label="Collection" name="collection"></el-tab-pane>
</el-tabs>The click event here is to combine the name with the route and uses the programmatic navigation, but it is not just to give the name to the route, because when we enter other people's space, we will overwrite the userId. According to the previous logic, this will lead to jumping into our own space. Therefore, we also need to put the query parameter together in the programmatic navigation
tabClickHandler(){
this.$router.push({
name:this.activeName,
query:{...this.$route.query}
})
}Next is the module display. According to different routes, switch to different components, request different data and render templates,
This block is defined outside the instance to simplify logical processing. Different data can be requested according to different requirements
const getOtherInfo = {
async works(params){
return (await getMenus(params)).data
},
async following(params){
return (await following(params)).data
},
async fans(params){
return (await fans(params)).data
},
async collection(params){
return (await collection(params)).data
}
}Here is the data request module, which requests the above different data according to the tab switching value, so as to render different modules. The call here is actually executed in the watch
async getInfo(){
let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId})
this.data = data.list
console.log(data);
},Explanation: the first mock exam is the same as the collection structure. The fans and the attention structure are the same, so the unified template can be reused.
Because all blocks are rendered using router view, you can transfer data to different modules through router view to achieve the purpose of rendering.
<div class="user-info-show">
<!-- works & Collection layout -->
<!-- <menu-card :margin-left="13"></menu-card> -->
<!-- fans & Focus on layout -->
<!-- <Fans></Fans> -->
<router-view :info='data' :activeName='activeName'></router-view>
</div>Receive parameters in the fan module. info is data and activeName is name
export default {
props:{
info:{
type:Array,
default:[]
},
activeName:{
type:String,
default:''
}
}
}Rendering data in fan module
<ul class="fans clearfix">
<router-link :to="{name:'space',query:{userId:item.userId}}" tag="li" v-for="item in info" :key="item.userId">
<a href="javascript:;" class="img">
<img :src="item.avatar"></a>
<div class="c">
<strong class="name">
<router-link :to="{name:'space',query:{userId:item.userId}}">{{item.name}}</router-link>
</strong>
<em class="info"><span>fans:</span> {{item.follows_len}}| <span>Attention:</span>{{item.following_len}}</em>
<em class="info"><span>Introduction:</span>{{item.sign == '' ?'The guy was lazy and left nothing':item.sign}}</em>
</div>
</router-link>
</ul>The function needs to be improved:
When there is no data, that is, when there are no fans and attention, you need to have prompt information. Judge whether prompt information is needed through the length of data, and judge whether to display fans or pay attention to prompt information according to the name..
<div class="info-empty" v-if="!info.length"> <div> <p v-if='activeName == "fans"'>Not noticed yet! Publish more recipes to make them easier to find.</p> <p v-if="activeName == 'following'">Haven't paid attention to others yet! You can preview recipes and find others</p> </div> </div>
Similarly, data is received in the work module
props: {
info:{
type:Array,
default:[]
},
activeName:{
type:String,
default:''
}
}Show and hide tips based on data
<div class="menu-list">
<div class="info-empty" v-if='!info.length'>
<div v-if='activeName == "works"'>
<p>Don't enjoy private dishes secretly~~Make a recipe and share it with you!</p>
<a href="">Publish menu</a>
</div>
</div>
<div class="info-empty" v-if="!info.length">
<div v-if="activeName == 'collection'">
<p>I haven't collected any recipes yet. Go to search my favorite recipes and collect them.</p>
<a href="">Complete menu</a>
</div>
</div>I use the third layer template for data rendering, so I need to pass the data to the next level
<menu-card :margin-left="13" :info='info'></menu-card>
Accept the data in the work list template and render the data according to the data and style
<el-row class="menu-card" type="flex" justify="start">
<el-col
style="flex:none"
:style="{'margin-left':marginLeft+'px'}"
v-for="item in info" :key="item._id"
>
<el-card :body-style="{ padding: '0px' }" >
<router-link :to="{name:'detail'}">
<img :src="item.product_pic_url" class="image" style="width: 232px;height: 232px;">
<div style="padding: 14px;" class="menu-card-detail">
<strong>Dish name:{{item.title}}</strong>
<span>{{item.comments_len}} comment</span>
<router-link :to="{name:'space',query:{userId:item.userId}}" tag="em">
Author:{{item.name}}
</router-link>
</div>
</router-link>
</el-card>
</el-col>
</el-row>This is the end of today's sharing. The specific functions are not very difficult, and the logical thinking is not very around. It should be noted that there are some details that need to be reversed. Please pay more attention to...
I wish you a good life