vue tab路由切换组件 vue实现tab路由切换组件的方法实例
禁花 人气:0想了解vue实现tab路由切换组件的方法实例的相关内容吗,禁花在本文为您仔细讲解vue tab路由切换组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,tab路由切换组件,vue,tab路由切换,vue中的路由跳转,下面大家一起来学习吧。
前言
本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能,下面话不多说了,来一起看看详细的实现代码吧
实现图片如下
下列为实现代码
css:
*{ margin: 0; padding: 0; } #app ul{ width: 300px; height: 30px; list-style: none; } #app>ul>li{ width: 100px; height: 30px; float: left; }
html:
<div id="app"> <ul> <li> <router-link to="/dyy">第一页</router-link> </li> <li> <router-link to="/dey">第二页</router-link> </li> <li> <router-link to="/dsy">第三页</router-link> </li> </ul> <router-view></router-view> </div> <template id="DyyDay"> <div> <ul> <li>News 01</li> <li>News 02</li> <li>News 03</li> </ul> </div> </template> <template id="DeyDay"> <div> <ul> <li>message 01</li> <li>message 02</li> <li>message 03</li> </ul> </div> </template> <template id="DsyDay"> <div> <h1>Home</h1> <router-link to="/dsy/home1">home1</router-link> <router-link to="/dsy/home2">home2</router-link> <router-view></router-view> </div> </template> <template id="home1"> <h1>我是home1</h1> </template> <template id="home2"> <h1>我是home2</h1> </template>
js.
let Dyy={template:`#DyyDay`}; let Dey={template:`#DeyDay`}; let Dsy={template:`#DsyDay`}; let home1={template:`#home1`}; let home2={template:`#home2`}; let router=new VueRouter({ routes:[ { path:'/',redirect:"dyy" }, { path:'/dyy',component:Dyy }, { path:'/dey',component:Dey }, { path:'/dsy',component:Dsy , children:[ {path:'/dsy/home1',component:home1}, {path:'/dsy/home2',component:home2} ] }] }); let app=new Vue({ router }).$mount('#app')
总结
加载全部内容