这篇文章主要介绍“vue-router怎么实现组件切换功能”,在日常操作中,相信很多人在vue-router怎么实现组件切换功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue-router怎么实现组件切换功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
首先,在实现这个需求之前,我们先分析或者回想下和自己做过的demo中哪个类似,相信很多朋友立马就会想起来---tab栏切换,那么对于HTML结构的设计我们便可以借助tab栏切换的结构:一个大盒子套着两个小盒子,一个作容器,另一个作导航!
HTML 结构
<div>
<div>容器</div>
<div class="footer">
<div class="module-nav">
<div class="nav-i">
<div class="iconfont icon"></div>
<h4>首页</h4>
</div>
<div class="nav-i">
<div class="iconfont icon"></div>
<h4>发现</h4>
</div>
<div class="nav-i">
<div class="iconfont icon-add"></div>
</div>
<div class="nav-i">
<div class="iconfont icon"></div>
<h4>消息</h4>
</div>
<div class="nav-i">
<div class="iconfont icon"></div>
<h4>我的</h4>
<div>
</div>
</div>
</div>
做完HTML结构的编写,那我们在给上面的骨架穿上衣服,根据需求“底部固定”,我们很容易便会想到 position: fixed ,当然我这里也是用固定定位实现的,但布局采用的是 flex,在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题,如:flex 属性失效,两者效果冲突等,原因更多的便是“脱标”导致的,其中更多的便是出现在父元素 flex,子元素 position的时候,这时候可以中间加个div使两者摆脱联系。
css 样式( stylus形式 )
.footer
position fixed
bottom 0
z-index 999
max-width 1080px
width 100%
border-top 1px solid #C0C0C0
.module-nav
display flex
justify-content space-around
.nav-i
width 60px
text-align center
.icon
font-size 35px
padding 5px 0
.icon-add
font-size 60px
h4
font-size 15px
font-weight normal
margin 0
padding-bottom 5px
骨架和衣服都做好后,那么大概的雏形就出来了,我们的需求也就实现了一半,剩下的便是组件切换了。这个就简单了,只需要配置下路由表,然后指定跳转便可以了
路由表
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/find",
name: "find",
component: Find
},
{
path: "/info",
name: "info",
component: Info
},
{
path: "/user",
name: "user",
component: User
}
]
最后在“容器”内添加router-view即可,下面可以看看完整代码:
// HTML
<div>
<div class="main-content">
<router-view></router-view>
</div>
<div class="footer">
<div class="module-nav">
<router-link tag="div" to="/" class="nav-i">
<div class="iconfont icon"></div>
<h4>首页</h4>
</router-link>
<router-link tag="div" to="/find" class="nav-i">
<div class="iconfont icon"></div>
<h4>发现</h4>
</router-link>
<div class="nav-i">
<div class="iconfont icon-add"></div>
</div>
<router-link tag="div" to="/info" class="nav-i">
<div class="iconfont icon"></div>
<h4>消息</h4>
</router-link>
<router-link tag="div" to="/user" class="nav-i">
<div class="iconfont icon"></div>
<h4>我的</h4>
</router-link>
</div>
</div>
</div>
// css
.footer
position fixed
bottom 0
z-index 999
max-width 1080px
width 100%
border-top 1px solid #C0C0C0
.module-nav
display flex
justify-content space-around
.nav-i
width 60px
text-align center
.icon
font-size 35px
padding 5px 0
.icon-add
font-size 60px
h4
font-size 15px
font-weight normal
margin 0
padding-bottom 5px
// router
export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/find",
name: "find",
component: Find
},
{
path: "/info",
name: "info",
component: Info
},
{
path: "/user",
name: "user",
component: User
}
]
});
到此,关于“vue-router怎么实现组件切换功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4580264/blog/4356658