vue实现页面切换的两种方法
一种是通过vue-router切换页面,一种是通过v-if来切换页面。1.vue-router的方法:(1).安装Vue-Clinpm install -g @vue/cli(2).创建一个项目vue create hello-world(3).通过空格勾选上router、store、scss系统会自动生成router.js文件,store.js文件(4).新建...
·
一种是通过vue-router切换页面,一种是通过v-if来切换页面。
1.vue-router的方法:
(1).安装Vue-Cli
npm install -g @vue/cli
(2).创建一个项目
vue create hello-world
(3).通过空格勾选上router、store、scss
系统会自动生成router.js文件,store.js文件
(4).新建几个vue文件
路由跳转有两种模式, 一种是历史模式:mode: 'history',一种是hash模式:mode: 'hash'
首页
path: '/'
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: () => import(/* webpackChunkName: "about" */ './components/home.vue')
},
{
path: '/cloudservices',
name: 'cloudservices',
component: () => import(/* webpackChunkName: "about" */ './components/cloudServices.vue')
},
{
path: '/product',
name: 'product',
component: () => import(/* webpackChunkName: "about" */ './components/product.vue')
}
]
})
2.通过v-if来切换页面
<template>
<div class="wrapper">
<div class="wrapper_content">
<div class="tab_title">
<ul>
<li @click="tab=0" :class="{tab_active:tab==0}">
tab1
</li>
<li @click="tab=1" :class="{tab_active:tab==1}">
tab2
</li>
<li @click="tab=2" :class="{tab_active:tab==2}">
tab3
</li>
<li @click="tab=3" :class="{tab_active:tab==3}">
tab4
</li>
<li @click="tab=4" :class="{tab_active:tab==4}">
tab5
</li>
<li @click="tab=5" :class="{tab_active:tab==5}">
tab6
</li>
</ul>
</div>
<div class="content">
<div class="tab_content" v-if="tab==0">
内容一
</div>
<div class="tab_content" v-else-if="tab==1">
内容二
</div>
<div class="tab_content" v-else-if="tab==2">
内容三
</div>
<div class="tab_content" v-else-if="tab==3">
内容四
</div>
<div class="tab_content" v-else-if="tab==4">
内容五
</div>
<div class="tab_content" v-else-if="tab==5">
内容六
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tab:0 //默认选中第一个tab
};
}
};
</script>
<style scoped>
.wrapper {
width: 100%;
height: 600px;
background-color: white;
background-position: center;
display: flex;
justify-content: center;
}
.wrapper_content{
width: 1236px;
height: 100%;
display: flex;
justify-content: flex-start;
}
.tab_title{
width: 261px;
height: 100%;
background-color: sandybrown;
}
.tab_title>ul{
margin: 0;
padding: 0;
list-style: none;
width: 100%;
height: 542px;
margin-top: 28px;
display: flex;
flex-direction: column;
}
.tab_title>ul>li{
flex-grow: 1;
width: 100%;
text-align: center;
height: 80px;
line-height: 80px;
display: flex;
border: 1px solid #ccc;
justify-content: center;
}
.tab_title>ul>li:hover{
cursor: pointer;
}
.tab_title .tab_active{
cursor: pointer;
background: linear-gradient(to right top, #00a0ff, #0b62ff);
color: white;
border: 0;
}
.content{
width: 976px;
height: 100%;
border: 1px solid darkcyan;
}
.tab_content{
width: 100%;
height: 100%;
}
</style>
效果图:
更多推荐
已为社区贡献6条内容
所有评论(0)