<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.global.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.global.js" type="text/javascript" charset="utf-8"></script>
<style>
*{
padding: 0;
}
li{
list-style: none;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid black;
float: left;
}
li a{
text-decoration: none;
}
.zj{
width: 243px;
height: 240px;
border: 1px solid black;
text-align: center;
line-height: 240px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li><router-link to="/tab1">待付款</router-link></li>
<li><router-link to="/tab2">待发货</router-link></li>
<li><router-link to="/tab3">待收货</router-link></li>
</ul>
<div class="zj">
<router-view></router-view>
</div>
</div>
<template id="tab1">
<div>待付款商品信息</div>
</template>
<template id="tab2">
<div>待发货商品信息</div>
</template>
<template id="tab3">
<div>待收货商品信息</div>
</template>
<script>
const tab1={
template:"#tab1",
}
const tab2={
template:"#tab2",
}
const tab3={
template:"#tab3",
}
const router=VueRouter.createRouter({
history:VueRouter.createWebHashHistory(),
routes:[
{
path:"/",
redirect:"/tab1"
},
{
path:"/tab1",
component:tab1
},
{
path:"/tab2",
component:tab2
},
{
path:"/tab3",
component:tab3
},
]
})
const App=Vue.createApp({})
App.use(router)
App.mount("#app")
</script>
</body>
</html>
09-15