Vue.js路由实现选项卡简单实例

本文实例为大家分享了Vue.js路由实现选项卡的具体代码，供大家参考，具体内容如下

需要实现下图效果，点击上方选项卡，切换到不同内容的组件：

事先准备好两个库文件(vue.js、vue-router.js)、放到对应路径。

1.引入依赖库

脚本src=' http : vue。js ' type=' text/JavaScript ' charset=' GBK '/script script src=' http : vue-router。js ' type=' text/JavaScript ' charset=' GBK '/脚本2 .组件创建

const HTMl=Vue。extend({ template : ' div h1 HTMl/h1p { { msg } }/p/div '，data : function(){ return { msg : '这是html vue路由器.} } });const Css=Vue。extend({ template : ' div h1Css/h1p { { msg } }/p/div '，data(){ return{ msg: '这是CSS vue-router ' } } })；const Vue 1=Vue。extend({ template : ' div h1vue/h1p { { msg } }/p/div '，data(){ return{ msg: '这是vue vue-路由器' } } })；const JAVAScript=Vue。extend({ template : ' div h1 JAVAScript/h1p { { msg } }/p/div '，data(){ return{ msg: '这是JavaScript vue-router ' } } })；3.路由创建与映射

const router=new VueRouter({ routes :[{ path : '/Html '，component: Html }，{ path: '/css '，component: Css }，{ path: '/vue '，component: Vue1 }，{ path: '/javascript '，component: Javascript }，{ path 33: '/'，component 333333366默认路径] });4.挂在实例

const VM=new Vue({ router : router }).$ mount(' # app ')；5.页面路由器-链接，到指令跳转到指定路径

div id=' app ' div class=' app-tit ' router-link to='/html ' html/router-link router-link to='/CSS ' CSS/router-link router-link to='/vue ' vue/router-link router-link router-link to='/JavaScript ' JavaScript/router-link/div class=' app-con ' router-view/router-view/div/div 6 .所用样式

样式正文{ font-family: '微软雅黑；} # app { width : 600 pxmargin : 0 auto }。app-tit { font-size : 0；宽度： 600像素；} .app-tit .路由器-链路-活动{ background : # 09 ffcolor : # fff }。app-tita { display : in-block；高度： 40px线高： 40pxfont-size : 16px宽度： 25%;文本对齐：中心；背景# ccccolor: # 333文本装饰：无；} .app-con div { border : 1px solid # CCC；高度： 400像素；衬垫-顶部： 20px}/样式完整代码

！DOCTYPE html html lang=' en ' head meta charset=' GBK ' title hello world/title script src=' http : vue。js ' type=' text/JavaScript ' charset=' GBK '/script script src=' http : vue-router。js ' type=' text/JavaScript ' charset=' GBK '/script/head style body { font-family 3360 ' Microsoft YaHei '；} # app { width : 600 pxmargin : 0 auto }。app-tit { font-size : 0；宽度： 600像素；} .app-tit .路由器-链路-活动{ background : # 09 ffcolor : # fff }。app-tita { display : in-block；高度： 40px线高： 40pxfont-size : 16px宽度： 25%;文本对齐：中心；背景# ccccolor: # 333文本装饰：无；} .app-con div { border : 1px solid # CCC；高度： 400像素；衬垫-顶部： 20px}/style body div id=' app ' div class=' app-tit ' router-link to='/Html ' Html/router-link router-link to='/CSS ' CSS/router-link router-link to='/vue ' vue/router-link router-link to='/JavaScript ' JavaScript/router-link/div class=' app-con ' router-view/router-view/div/div脚本类型=' text/JAVAScript ' const Html=Vue .} } });const Css=Vue。extend({ template : ' div h1Css/h1p { { msg } }/p/div '，data(){ return{ msg: '这是路由器.} } });const Vue 1=Vue。extend({ template : ' div h1vue/h1p { { msg } }/p/div '，data(){ return{ msg: '这是“vue vue-路由器”.} } });const JAVAScript=Vue。extend({ template : ' div h1 JAVAScript/h1p { { msg } }/p/div '，data(){ return{ msg: '这是JAVAScript-Vue路由器。' } } });const router=new VueRouter({ routes :[{ path : '/Html '，component: Html }，{ path: '/css '，component: Css }，{ path: '/vue '，component: Vue1 }，{ path: '/javascript '，component: Javascript }，{ path 33: '/'，component 333333366默认路径] });const VM=new Vue({ router : router }).$ mount(' # app ')；/脚本/正文/html如有错误之处，欢迎指出，万分感谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。