49 lines
1.2 KiB
HTML
49 lines
1.2 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
||
|
|
<style>
|
||
|
|
.active{
|
||
|
|
font-size:20px;
|
||
|
|
color:red
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="rou">
|
||
|
|
<p>
|
||
|
|
<router-link to="/home">welcome 首页</router-link>
|
||
|
|
<router-link to="/user">账户管理</router-link>
|
||
|
|
|
||
|
|
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
|
||
|
|
</p>
|
||
|
|
<router-view></router-view>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const home = { template: '<div>welcome 首页</div>' }
|
||
|
|
|
||
|
|
const user = { template: '<div>账户管理页面</div>' }
|
||
|
|
|
||
|
|
const routes = [
|
||
|
|
{ path: '/home', component: home },
|
||
|
|
{ path: '/user', component: user },
|
||
|
|
{ path: '*', redirect: '/home'},//重定向
|
||
|
|
]
|
||
|
|
|
||
|
|
const router = new VueRouter({
|
||
|
|
routes: routes,
|
||
|
|
linkActiveClass:'active' // 修改选中的css 默认为router-link-active
|
||
|
|
})
|
||
|
|
|
||
|
|
var aj = new Vue({
|
||
|
|
el:'#rou',
|
||
|
|
router:router
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|