13518219792
本文實例為大家分享了Vue.js路由實現選項卡的具體代碼，供大家參考，具體內容如下
創新互聯建站主營陽西網站建設的網絡公司,主營網站建設方案,app開發定制,陽西h5小程序制作搭建,陽西網站營銷推廣歡迎陽西等地區企業咨詢
需要實現下圖效果，點擊上方選項卡，切換到不同內容的組件：
事先準備好兩個庫文件（vue.js、vue-router.js），放到對應路徑。
1.引入依賴庫
2.組件創建
const Html = Vue.extend({
template: 'html
{{msg}}
',
data: function() {
return {
msg: 'This is the html vue-router.'
}
}
});
const Css = Vue.extend({
template: 'CSS
{{msg}}
',
data(){
return{
msg: 'This is the CSS vue-router.'
}
}
});
const Vue1 = Vue.extend({
template: 'Vue
{{msg}}
',
data(){
return{
msg: 'This is the Vue vue-router.'
}
}
});
const Javascript = Vue.extend({
template: 'Javascript
{{msg}}
',
data(){
return{
msg: 'This is the 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: '/', component: Html } //默認路徑
]
});4.掛在實例
const vm = new Vue({
router: router
}).$mount('#app');
5.頁面
html css vue javascript
6.所用樣式
完整代碼
hello world html css vue javascript
如有錯誤之處，歡迎指出，萬分感謝！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
