html怎么使用vue路由,vueRouter使用.html

vueRouter使用

tab1

tab2

tab3

tab4

/*

定义四个组件模板,与a标签一一对应

*/

const tab1 = {

template: 'table01'

}

const tab2 = {

template: 'table02'

}

const tab3 = {

template: 'table03'

}

const tab4 = {

template: 'table04'

}

/*

创建路由 并绑定定义的组件模板

*/

var myRouter = new VueRouter({

//routes是路由规则数组

routes:[

//每一个路由规则都是一个对象，对象中至少包含path和component两个属性

//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象

{path:"/tab1",component:tab1},

{path:"/tab2",component:tab2},

{path:"/tab3",component:tab3},

{path:"/tab4",component:tab4},

]

});

new Vue({

el:"#app",

// 在实例中挂载路由对象

router:myRouter

})

#app {

width: 500px;

height: 300px;

border: 1px solid black;

}

#app router-link {

width: 100px;

padding: 10px;

}

.tablebody {

margin-top: 20px;

text-align: center;

background-color: aliceblue;

height: 240px;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史